analyze:
1. Select all and unselect all: You can make the checked attribute (selected state) of all check boxes follow the select all button
2. Let the following check boxes need to be selected all, and only when all are selected can they be selected:
Bind click events to all the check boxes below. Every time you click, you need to loop through to see if all the check boxes below are selected. If one of the check boxes is not selected, the select all button will not be selected.
html code
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="j_cbAll">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>css style
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
width: 300px;
text-align: center;
/* 边框合并 */
border-collapse: collapse;
font-size: 14px;
/* 表格边框边距 */
border-spacing: 0px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>JavaScript code
How to Select All and Unselect All
//1、获取元素
//全选按钮
var j_cbAll = document.getElementById('j_cbAll')
// tbody下的所有复选框
var j_tbs = document.getElementById('j_tb').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
}
}
Traversing through the check boxes below, if one is not selected, all selections will be canceled
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; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag
}
}full code
<!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>全选反选</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
width: 300px;
text-align: center;
/* 边框合并 */
border-collapse: collapse;
font-size: 14px;
/* 表格边框边距 */
border-spacing: 0px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="j_cbAll">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
/*
1、全选和取消全选做法：让下面所有复选框的checked属性（选中状态），跟随全选按钮即可
2、下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
*/
//1、获取元素
//全选按钮
var j_cbAll = document.getElementById('j_cbAll')
// tbody下的所有复选框
var j_tbs = document.getElementById('j_tb').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
}
}
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; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag
}
}
</script>
</body>
</html>