思路:分为两部分来做
1.以大的复选框来控制所有的小复选框,实现一键全选
2.以小的控制大的复选框,实现取消小的来反取消大的复选框
所用语法:
1.常见DOM操作获取事件源和注册事件
2.for循环遍历数组和if/else条件语句
3.checked 复选框状态
4.document.querySelectorAll('.ck:checked').length 利用css属性判断小复选框选中的个数
css
<!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>
</body>
</html>
js部分
<script>
业务一 以大控小
//1.1获取事件源
const checkAll = document.querySelector('#checkAll')
const cks = document.querySelectorAll('.ck ')
console.log(cks)
// 1.2注册事件 点击事件
//checkAll.addEventListener('click', function() {
checkAll.addEventListener('click', function() {
console.log(checkAll.checked) //checkAll.checked检查checkAll勾选状态 true代表勾选
for (let i = 0; i < cks.length; i++) {
console.log(cks);
cks[i].checked = checkAll.checked
}
})
业务二 以小控大
// 遍历数组 由于是小复选框故需先遍历访问数组拿到每个小的
for (let i = 0; i < cks.length; i++) {
// 注册事件 点击事件
cks[i].addEventListener('click', function() {
//console.log(document.querySelectorAll('.ck:checked').length)
document.querySelectorAll('.ck:checked').length 利用css属性判断小复选框选中的个数
接上代码段
if (document.querySelectorAll('.ck:checked').length === 3) {
checkAll.checked = true
} else {
checkAll.checked = false
}
})
}
</script>
最后可以实现一键全选、取消小的则大的复选框自动取消(如下图)
