复选框太小,我点不到啊
最近发现表格里面有复选框的,但是复选框太小了不容易点,就有了让复选框更容易选中的想法。
直接上代码
// html 部分
<link rel="stylesheet" type="text/css" href="lib/Bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
...
<table class="table">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th></th>
</tr>
<tr>
<td>大傻</td>
<td>男</td>
<td>32</td>
<td class="tdcheck"><input type="checkbox" id="checkbox-0" name="checkbox" /></td>
</tr>
<tr>
<td>二傻</td>
<td>男</td>
<td>29</td>
<td class="tdcheck"><input type="checkbox" id="checkbox-1" name="checkbox" />
</tr>
</table>
- 点击行 复选框选中
$("tr").slice(1).on('click', function (event) { // slice(1) 去掉表头
// 找到checkbox对象
var chks = $("input[type='checkbox']",this);
if ( chks.prop("checked") ) {
chks.prop("checked",false);
} else {
chks.prop("checked",true);
}
});
- 点击复选框所在单元格 复选框选中
$(".tdcheck").on('click', function(event) {
var checkbox = $(this).find(":checkbox");
if ( checkbox.prop("checked") ) {
// checkbox.removeAttr("checked");
checkbox.prop("checked", false);
} else {
checkbox.prop("checked", true);
}
});
但是这样发现一个问题,我点复选框反而没反应了。打断点才发现,原来是事件冒泡了
解决方法就是点击复选框的时候阻止冒泡就好
var $input = $("input[type='checkbox']");
for (let i = 0; i < $input.length; i++) {
$($input[i]).click(function(e) {
e = window.event || e;
if(document.all) {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
});
}
好了,问题解决了,如果有不对的地方请多多指教。