javascript - 点击table中td 选中td中checkbox问题
本文介绍了javascript - 点击table中td 选中td中checkbox问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<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呢?
解决方案
首先来说一下为什么会出现这种情况
这种情况是 事件冒泡 机制导致
什么是事件冒泡,简单的说就是子元素的事件触发会一直向父元素传递。
好比说你这里,点击了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了
这篇关于javascript - 点击table中td 选中td中checkbox问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文