今天教大家利用js实现checkbox全选和取消反选效果，废话不多说直接上代码和运行效果
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
tr td:first-of-type,
tr td:nth-of-type(3),
tr td:nth-of-type(4) {
text-align: center;
}
tr td:nth-of-type(3) p,
tr td:nth-of-type(4) p {
font-size: 12px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4"><img src="03/img/bg.png" ></td>
</tr>
<tr>
<th><input type="checkbox" id="all" />全选</th>
<th>商品图片</th>
<th>商品名称/出售者/联系方式</th>
<th>价格</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><img src="03/img/pic1.png"></td>
<td>
<p>杜比环绕，家庭影院必备，超真实享受</p>
<p>出售者：ling112233</p>
<p><img src="03/img/collect.png"><img src="03/img/lx.png"></p>
</td>
<td>
<p>一口价</p>
<p>2833.0</p>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><img src="03/img/pic2.png"></td>
<td>
<p>NVDIA 9999GT 512MB 256bit极品显卡，不容错过</p>
<p>出售者：aipiaopiao110</p>
<p><img src="03/img/collect.png"><img src="03/img/lx.png"></p>
</td>
<td>
<p>一口价</p>
<p>6465.0</p>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><img src="03/img/pic3.png"></td>
<td>
<p>精品热卖，高清晰，30寸等离子电视</p>
<p>出售者：阳光的挣扎</p>
<p><img src="03/img/collect.png"><img src="03/img/lx.png"></p>
</td>
<td>
<p>一口价</p>
<p>18888.0</p>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><img src="03/img/pic4.png"></td>
<td>
<p>Sony索尼家用最新款笔记本</p>
<p>出售者：疯狂的镜无</p>
<p><img src="03/img/collect.png"><img src="03/img/lx.png"></p>
</td>
<td>
<p>一口价</p>
<p>5889.0</p>
</td>
</tr>
</table>
<script type="text/javascript">
//选中全选框
var _all = document.querySelector("#all");
var _boxes = document.querySelectorAll("input[type=checkbox]:not(#all)");
//设置选中全选框其他复选框会选中/反之
_all.onclick = function() {
// checked:获取被选中时的状态（当被选中时返回true，反之false）
// this:当前的点击对象
var status = this.checked;
//复选框跟全框选状态保持一致
_boxes.forEach(function(item) {
item.checked = status;
})
}
//设置复选框全部选中之后全选框就会被选中/反之
//item:指_boxes内的每一项
_boxes.forEach(function(item) {
item.onclick = function() {
//过滤出所有被选中的复选框
// filter:返回所有符合条件的元素数组；
var chs = Array.from(_boxes).filter(function(age) {
return age.checked == true;
})
_all.checked = chs.length === _boxes.length;
}
})
</script>
</body>
</html>运行效果：
end
希望对大家有所帮助，不懂得小伙伴们可以评论下方留言哦！