1. 思路
- 点击全选框,则下面的复选框全部选中;取消全选框,下面的复选框全部取消选中;
- 只有选中下面的所有复选框以后,才会选中全选框;否则,只要下面存在一个未被选中的复选框,则全选框不会被选择;
2. 代码实现
2.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 500px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #7d7d7d;
font-size: 12px;
color: blue;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll">全选</input>
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>豆浆</td>
<td>3元</td>
</tr>
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>油条</td>
<td>5元</td>
</tr></tr>
<tr>
<td>
<input type="checkbox"></input>
</td>
<td>鸡腿</td>
<td>10元</td>
</tr>
</tbody>
</table>
</div>
<script>
// 1. 点击全选按钮,其他复选框也跟着全选;取消的话,同样的;
// 1.1 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').querySelectorAll('input');
// 1.2 注册时间
j_cbAll.onclick = function() {
// this.checked 获取 j_cbAll的选中状态 ,选中(true)、未选中(false)
console.log(this.checked);
for(var i =0;i<j_tbs.length;i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面的复选框影响上面的(只有全选中时,才会选中上面的)
for(var i=0; i<j_tbs.length;i++) {
j_tbs[i].onclick = function() {
// flag控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框,都要循环检查下面所有的复选框是否全部被选中
for(var i =0;i<j_tbs.length;i++) {
if(!j_tbs[i].checked) {
// 有一个没选中,则无需将上面的复选框选中,并且跳出循环
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
2.2 效果