我们在进行网页制作的时候,通常会用到复选框,而复选框外面往往有一个大的勾选框来,控制里面的框是否全部选择,而里面的小复选框同时也是在控制着外面大的选择框,当里面全选的时候,外面的也会勾选上,今天我们了了解如何实现,这个功能:
代码展示如下:
<!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++) {
//让所有的小复选框同大复选框一同变化
//下面这句的意思是让外面大的选择框有checked的时候里面的小复选框也同时加上这个属性
cks[i].checked = checkAll.checked
}
})
for(let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click',function() {
//=后面返回的是false或true
checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
})
}
</script>
</body>
</html>