<html>
<head>
<style>
*{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing: 0;
border:1px solid #c0c0c0;
width:500px;
margin:100px auto;
text-align: center;
}
td{
border:1px solid #d0d0d0;
color:#404060;
padding:10px;
}
.allCheck{
width:80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="checkAll" id="checkAll">
<span class="all">全选</span>
<input type="checkbox" name="RevcheckAll" id="RevcheckAll">
<span class="Revall">反选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td> <input type="checkbox" name="check" class="ck"></td>
<td>小米手机</td>
<td>小米</td>
<td>11999</td>
</tr>
<tr>
<td> <input type="checkbox" name="check" class="ck"></td>
<td>小米热水器</td>
<td>小米</td>
<td>11999</td>
</tr>
<tr>
<td><input type="checkbox" name="check" class="ck"></td>
<td>小米电视</td>
<td>小米</td>
<td>11999</td>
</tr>
</table>
</body>
<script>
//1.获取大复选框
const checkAll=document.querySelector('#checkAll');
const RevcheckAll=document.querySelector('#RevcheckAll');//反选按钮
//获取小的复选框
const cks=document.querySelectorAll('.ck');
//3.点击大复选框
checkAll.addEventListener('click',function(){
for(let i=0;i<cks.length;i++){
cks[i].checked=this.checked;
}
})
//小勾选框控制大勾选框
//5.1 给小复选框添加点击事件
for(let i=0;i<cks.length;i++){
//判断选中的小复选框
cks[i].addEventListener('click',function(){
checkAll.checked=document.querySelectorAll('.ck:checked').length===cks.length;
})
}
//反选的 我还没想到，这个代码先存着，我有空的时候来完善以下。
RevcheckAll.addEventListener('click',function(){
//不懂得怎么写了 ，可是这个非常重要啊
})
</script>
</table>
</html>
标签：checkAll,border,反选,js,全选,复选框,小米 From： https://www.cnblogs.com/tomcat2022/p/17653872.html