全选操作的基本实现
方法一：
设定一个flag变量为true，遍历下面的每一选择框，为其绑定点击事件
通过点击事件，再遍历下面每一个选择框，进入判断。
如果下面的选择框至少有一个没有被选中，把变量flag的值设为false，并赋值给上面的全选框
如果下面的选择框都被选中，不用改变flag的值，直接赋值给上面的全选框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>10-全选反选案例</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>
// 获取元素
let checkAll = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let all = document.querySelector('.all')
// 绑定事件
// 上面全选框影响下面多个选择框
checkAll.addEventListener('click', function() {
// 获取当前全选框单击之后的状态
let state = checkAll.checked
// console.log(state);
// 把全选框的状态遍历赋值给下面的每一个复选框
cks.forEach(function(value, index) {
value.checked = state
});
all.innerText = state ? '取消' : '全选'
})
// 下面多个选择框影响上面全选框
// 外层循环，遍历每一个子元素，为其绑定点击事件
cks.forEach(function(v, i) {
v.addEventListener('click', function() {
// 设定一个变量
let flag = true
// 内层循环，遍历每一个子元素，判断当前遍历的子元素是否都是选中状态
cks.forEach(function(v, i) {
// 如果遍历中有一个子元素不是选中，就为false 赋值给flag
// 当满足条件，说明有未被选中的
if (!v.checked) {
flag = false
}
})
// 把flag的值赋值给上面全选
checkAll.checked = flag
all.innerText = flag ? '取消' : '全选'
})
})
</script>
</body>
</html>
方法二：
先遍历下面每一个选择框，为其绑定点击事件
通过点击事件，再遍历下面每一个选择框，设定一个变量count，如下面每有一个被选中的选择框，count加1，最后进行判断
如果count等于下面所有选择框的数量，就把上面的全选框的checked设为true
如果count不等于下面所有选择框的数量，就把上面的全选了的checked设为false
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>10-全选反选案例</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>
// 获取元素
let checkAll = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let all = document.querySelector('.all')
// 绑定事件
// 上面全选框影响下面多个选择框
checkAll.addEventListener('click', function() {
// 获取当前复选框单击之后的状态
let state = checkAll.checked
// console.log(state);
// 把复选框的状态遍历赋值给每一个下面的复选框
cks.forEach(function(value, index) {
value.checked = state
});
all.innerText = state ? '取消' : '全选'
})
// 下面选择框影响上面全选框
// 每选中一个复选框，数量加1，如果选中的复选框数量等于复选框的总数，则上面全选被选中
// 外层循环，遍历每一个值为其绑定单击事件
cks.forEach(function(v, i) {
// 绑定下面复选框点击事件
v.addEventListener('click', function() {
// 假设刚开始选中复选框的数量为0
let count = 0
// 内层循环,遍历每一个元素,选出选中的数量
cks.forEach(function(v, i) {
if (v.checked) {
count++
}
if (count === cks.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
})
})
})
</script>
</body>
</html>
方法三：
通过获取元素，使用document.querySelectorAll('.ck:checked')获取所有被选中的选择框的一个伪数组的长度并赋值给变量count
通过判断count是否等于下面选择框的总数量，如果是，上面全选框的checked属性设为true，如果否，上面全选框的checked属性设为false
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>10-全选反选案例</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>
// 获取元素
let checkAll = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let all = document.querySelector('.all')
// 绑定事件
// 上面全选框影响下面多个选择框
checkAll.addEventListener('click', function() {
// 获取当前复选框单击之后的状态
let state = checkAll.checked
// console.log(state);
// 把复选框的状态遍历赋值给每一个下面的复选框
cks.forEach(function(value, index) {
value.checked = state
});
all.innerText = state ? '取消' : '全选'
})
// 下面选择框影响上面全选框
// 选出被选中的复选框，若选中的复选框数量等于复选框的总数，上面的全选就被选中
// 遍历
cks.forEach(function(v, i) {
v.addEventListener('click', function() {
let count = document.querySelectorAll('.ck:checked').length
if (count === cks.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
})
})
</script>
</body>
</html>
