<!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>
td {
border: 1px solid black;
text-align: center;
}
table {
border-collapse: collapse;
width: 800px;
}
</style>
</head>
<body>
<table>
<caption>全选取消全选</caption>
<thead>
<tr>
<td>
全选<input id="checkbox" type="checkbox">
</td>
<td>价格</td>
<td>名字</td>
<td>详情</td>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="checkbox"></td>
<td>12</td>
<td>京东</td>
<td>京东宝贝</td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox"></td>
<td>13</td>
<td>华为</td>
<td>华为宝贝</td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>小米</td>
<td>小米宝贝</td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox"></td>
<td>15</td>
<td>淘宝</td>
<td>淘宝宝贝</td>
</tr>
</tbody>
</table>
<script>
var inputall = document.querySelectorAll('.checkbox')
var biginput = document.querySelector('#checkbox')
var num = 0;
biginput.addEventListener('click', function () {
console.log(this.checked);
for (var i = 0; i < inputall.length; i++) {
inputall[i].checked = this.checked
}
})
for (var i = 0; i < inputall.length; i++) {
inputall[i].addEventListener('click', function () {
if (this.checked) {
num++;
if (num == inputall.length) {
biginput.checked = this.checked
console.log(this, this.checked, num);
}
} else {
num--
biginput.checked = this.checked
}
})
}
</script>
</body>
</html>
