### 一、實現效果 + 點擊全選按鈕/取消全選，控制商品的全選或取消 + 每個商品的覆選框都選中後，自動勾上全選按鈕，或者商品任何一個覆選框沒有選中，取消全選 
二、思路
- 就是由大的全選按鈕，控制所有的覆選框
- 小的覆選框控制大的全選按鈕
三、js中小的覆選框控制大的全選框，用到了一個css偽類選擇器
input:checked
舉個例子
<!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">
<title>Title</title>
<style>
input:checked{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<input type="checkbox" >
</body>
</html>
四、完整的代碼段
<!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">
<title>Title</title>
<style>
div {
margin: 100px auto;
width: 500px;
height: 300px;
}
table {
border-collapse: collapse;
width: 100%;
height: 50%;
text-align: center;
}
table tr th {
background-color: #3899ce;
}
</style>
</head>
<body>
<div>
<table border="1">
<thead>
<tr>
<th><input type="checkbox" class="check-all">全選</th>
<th>商品</th>
<th>商家</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小米手機</td>
<td>小米</td>
<td>1999</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小米凈水器</td>
<td>小米</td>
<td>2999</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小米電視</td>
<td>小米</td>
<td>3999</td>
</tr>
</tbody>
</table>
</div>
<script>
const checkAll = document.querySelector('.check-all')
const checkList = document.querySelectorAll('tbody input')
//大覆選框控制小覆選框
checkAll.addEventListener('click', function () {
//當點擊全選按鈕時，每一行的checked的狀態會和全選/取消是一樣的，所以要獲取每一行的數據在進行更改
for (let i = 0; i < checkList.length; i++) {
checkList[i].checked = this.checked
}
})
//由小的覆選框控制大的覆選框
//如果勾選完每一行數據後，全選按鈕自動選上，或者取消勾選一行數據，全選按鈕自動取消
//核心思想就是通過css的偽類選擇器，找到選中的個數與總的覆選框個數進行對比
//如果選中個數===總個數，全選按鈕就勾上，否則取消
for (let i = 0; i < checkList.length; i++) {
checkList[i].addEventListener('click', function () {
checkAll.checked = document.querySelectorAll('tbody input:checked').length ===checkList.length
})
}
</script>
</body>
</html>
本文來自博客園，作者：弩哥++，轉載請註明原文鏈接：https://www.cnblogs.com/bangbangzoutianya/p/17638226.html
