DOM之全选反选
程序员文章站
2022-05-31 10:54:32
...
效果图如下：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 800px;
margin: 100px auto;
padding: 0;
font-size: 14px;
}
thead tr {
height: 32px;
text-align: center;
background-color: rgba(135, 207, 235, 0.514);
}
tbody tr {
height: 30px;
text-align: center;
background-color: rgba(199, 223, 233, 0.301);
}
td {
border-bottom: 1px solid #ccc;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead id="thead">
<tr>
<th>
<input type="checkbox" id="headipt">
</th>
<th>点菜</th>
<th>顾客</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox">
</td>
<td>糖醋里脊</td>
<td>张三</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>甜不辣</td>
<td>李四</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>蔬菜大拼</td>
<td>王五</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>蔬菜大拼</td>
<td>王五</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>蔬菜大拼</td>
<td>王五</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>蔬菜大拼</td>
<td>王五</td>
</tr>
</tbody>
</table>
</div>
<script>
// 1.获取元素
var j_cbAll = document.getElementById('headipt'); //全选按钮
var j_tbs = document.getElementById('tbody').getElementsByTagName('input'); //下面所有的复选框
//2.注册事件
j_cbAll.onclick = function() {
//this.checked 他可以得到当前复选框的选中状态，如果是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 j = 0; j < j_tbs.length; j++) {
if (!j_tbs[j].checked) {
flag = false;
break; //退出for循环，可以提高执行效率，只要有一个选中，其他就不用再判断了
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>