一、需求
1、单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中
2、当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中
二、代码素材
以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
</script>
</body>
</html>三、算法思路
1、获取相关元素
2、为全选框绑定鼠标点击事件，当点击事件触发时，将下面三个复选框的状态设置为与全选框一致
3、利用事件委托为下面三个复选框绑定鼠标点击事件，当任意一个复选框触发点击事件时，判断下面三个复选框是否全为选中状态，若全选中，则将全选框设置为全选，否则不设置。
四、完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
//获取元素
const checkAll = document.querySelector('#checkAll')
const cks = document.querySelectorAll('.ck')
//业务模块一：单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中
checkAll.addEventListener('click', function () {
for (let i = 0; i < cks.length; i++)
cks[i].checked = this.checked
})
//业务模块二：当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中
//利用事件委托绑定事件
const table=document.querySelector('table')
table.addEventListener('click',e=>{
if(e.target.tagName==='INPUT'){
checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
//.ck:checked是CSS伪类选择器，可以获取复选框中checked为true的选择器
}
})
</script>
</body>
</html>
