点击表格中任意处都可以选中多选框

最新推荐文章于 2019-12-04 16:44:30 发布

struggling888

最新推荐文章于 2019-12-04 16:44:30 发布

阅读量1.2k

点赞数

分类专栏：锋利的jquery 文章标签：表格多选选中未选中

本文链接：https://blog.csdn.net/struggling888/article/details/67634892

版权

锋利的jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8">
<style>
.bgRed{background-color:#fff}
</style>
</head>
<body>
<div class="administration-body clearfix">
<table border="1px solid #aaa" width="100%" style="table-layout:fixed;" id="tableModel" >

<tr>
<td width="10%"><input class="use" type="checkbox" name="use"></td>
<td width="5%">姓氏</td>
<td width="10%">手机号</td>
<td width="7%">评价来源</td>
<td width="5%">评价打分</td>
<td width="18%">评价详情</td>
<td width="15%">评价时间</td>
<td width="17%">#^^</td>
<td width="19%">c</td>
<td width="7%">操作</td>
</tr>
<tr>
<td width="10%"><input class="use" type="checkbox" name="use"></td>
<td width="5%">姓氏</td>
<td width="10%">手机号</td>
<td width="7%">评价来源</td>
<td width="5%">评价打分</td>
<td width="18%">评价详情</td>
<td width="15%">评价时间</td>
<td width="5%">是否跟进</td>
<td width="19%">跟进情况备注</td>
<td width="7%">操作</td>
</tr>
</table>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script src="../jquery/jquery-1.8.3.min.js"></script>
<script>
//透传事件（点击选框时就选中了，但是在选框外面是个tr，同时又触发tr点击事件，当执行tr，click时判断check是否未选中时这时，check是选中状态，就有把checkbox，取消了）
/*$("tr").toggle(function(){
$(this).children().eq(0).children("input").prop('checked',true);
},function(){
$(this).children().eq(0).children("input").prop("checked",false);
});*/

//解决方案一：添加一个属性
/*$("tr").click(function () {
$(this).toggleClass("bgRed");
if ($(this).css("background-color") != $(document.body).css("background-color")) {
$(this).children().eq(0).children("input").attr("checked", true);
} else {
$(this).children().eq(0).children("input").attr("checked", false);
}
});*/

//解决方案二：
var a=false;
$(".use").click(function(){
a=true;
})
$("tr").click(function(){
if(a){
a=false;
}else{
if($(this).children().eq(0).children("input").is(':checked')){
$(this).children().eq(0).children("input").prop("checked",false);
}else{
$(this).children().eq(0).children("input").prop('checked',true);
}
}
});

</script>
</body>
</html>