点击table中td 选中td中checkbox问题

Question

<table class="table">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tr>
        <td><input class="A" type="checkbox" value="" /></td>
        <td><input class="B" type="checkbox" value="" /></td>
        <td><input class="C" type="checkbox" value="" /></td>
        <td><input class="D" type="checkbox" value="" /></td>
        <td><input class="E" type="checkbox" value="" /></td>
    </tr>
</table>

目的：
在点击td任何地方的时候，checkbox都设置成被选中或取消的状态

但是在点击td选中或者取消checkbox时，如果点击checkbox操作的时候会和td选中 取消冲突，造成checkbox不能选，

js如下：

$(".table").on("click", "tr td", function(){
    var checkbox  = $(this).find("input[type='checkbox']");
    var isChecked = checkbox.is(":checked");
    
    // 
    if (isChecked) {
        checkbox.removeAttr("checked");
    } else {
        checkbox.attr("checked","true");
    }
})

怎么才能在td之前 检查点击的是不是checkbox呢？

Answer 1

首先来说一下为什么会出现这种情况

这种情况是 事件冒泡 机制导致
什么是事件冒泡，简单的说就是子元素的事件触发会一直向父元素传递。

好比说你这里，点击了input之后，click事件会一直向父元素传递，于是input所在的td标签，td所在的tr标签，tr所在的table标签等等一直到根元素都会触发click事件。

然后你要在事件绑定的匿名函数里添加一个参数，一般写为 e 就好。

当前触发该事件的元素会放到 e.target 属性上，这是一个HTMLElement对象，简单点你就可以判断他的标签名是不是input来判断，如果是就不处理就好。

$(".table").on("click", "tr td", function(e){
    // 写上一个参数 e
    // 然后可以判断  e.target.tagName 
})

---

另一种做法就是给td里面的input绑定click事件，然后阻止事件冒泡，这样点击input的时候就不会触发td的click了

Answer 2

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation