正文

页内多个input全选不干扰且只用一段代码。

IP云
IP云V管理员/5 阅读
10/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

//html内容

<body>
<div id="d1">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div id="d2">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div id="d3">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div id="d4">
<input type="checkbox" class="in2">全选
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>

//
<script src="jquery-3.1.1.min.js"></script>//引入jquery
<script>
$('.in2').click(function () {                        //点击class为in2的input是触发
var div2=this.closest('div').children;          //使用closest方法获取父节点，然后使用children获取所有子元素
if(div2[0].checked){//判断第一个input的checked状态，如果为true，则其它都为true
for (var i = 0; i <div2.length; i++) {
div2[i].checked=true;
}
}
else{
for (var i = 0; i <div2.length; i++) {
div2[i].checked=false;
}

}

})

</script>