1.什么情况下后面的所有复选框都要选中?
(1)点击全选按钮
(2)如果全选按钮是选中的状态,则后面所有的复选框要选中
2.什么情况下后面的所有复选框不选中?
(1)点击全选按钮
(2)如果全选按钮是未被选中的状态,则后面的所有复选框不选中
html代码如下
<table>
<tr class="title">
<th>
<input type="checkbox" id="checkAll"><span>全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>¥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>¥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>¥5999</td>
</tr>
</table>
CSS代码如下:
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 100px auto;
border: 1px solid #c0c0c0;
border-collapse: collapse;
text-align: center;
border-spacing: 0;
}
.title {
background-color: pink;
color: #fff;
height: 24px;
}
td {
border: 1px solid #c0c0c0;
color: #000;
padding: 10px;
}
</style>
javascript代码如下:
// 获取全选按钮
let checkAll = document.querySelector('#checkAll');
// 获取后面所有的复选框
let cks = document.querySelectorAll('.ck');
// 给全选按钮注册点击事件
checkAll.addEventListener('click', function () {
for (let i = 0; i < cks.length; i++) {
cks[i].checked = this.checked
}
});
// 后面的复选框控制全选按钮
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
if (document.querySelectorAll('.ck:checked').length === cks.length) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
})
}