Today, I will teach you how to use js to realize the effect of full checkbox selection and cancel inverse selection, and directly upload the code and running effect without talking nonsense.
code:
<!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>running result:
end
I hope it can be helpful to everyone. If you don’t understand, you can leave a comment below!