html+css部分
<style type="text/css">
<div class="table-div2">
<table class="table2">
<thead>
<tr class="tr2">
<th class="th2"><input type="checkbox" class="selectAll"></th>
<th class="th2">商品</th>
<th class="th2">價格</th>
</tr>
</thead>
<tbody>
<tr class="tr2">
<td class="td2"><input type="checkbox" class="checkbox1"></td>
<td class="td2">iphone11</td>
<td class="td2">5499</td>
</tr>
<tr class="tr2">
<td class="td2"><input type="checkbox" class="checkbox1"></td>
<td class="td2">iphone XS Max</td>
<td class="td2">6299</td>
</tr>
</tbody>
</table>
</div>
</style>
<body>
<div class="table-div2">
<table class="table2">
<thead>
<tr class="tr2">
<th class="th2"><input type="checkbox" class="selectAll"></th>
<th class="th2">商品</th>
<th class="th2">價格</th>
</tr>
</thead>
<tbody>
<tr class="tr2">
<td class="td2"><input type="checkbox" class="checkbox1"></td>
<td class="td2">iphone11</td>
<td class="td2">5499</td>
</tr>
<tr class="tr2">
<td class="td2"><input type="checkbox" class="checkbox1"></td>
<td class="td2">iphone XS Max</td>
<td class="td2">6299</td>
</tr>
</tbody>
</table>
</div>
</body>
js部分
var selectAllBtn = document.querySelector('.selectAll')
var checkbox1s = document.querySelectorAll('.checkbox1')
console.log(selectAllBtn)
console.log(checkbox1s)
var checkedNum = 0
selectAllBtn.onclick = function () {
if (selectAllBtn.checked == true) {
checkbox1s.forEach(function (checkbox, index) {
checkbox.checked = true
})
checkedNum=checkbox1s.length
} else if (selectAllBtn.checked == false) {
checkbox1s.forEach(function (checkbox, index) {
checkbox.checked = false
})
checkedNum=0
console.log('selectAllBtn.checked =' + selectAllBtn.checked)
}
}
checkbox1s.forEach(function (checkbox, index) {
/*checkbox.checked = false*/
checkbox.onclick = function () {
if (checkbox.checked == false) {
checkedNum--
} else if (checkbox.checked == true) {
checkedNum++
}
/*console.log('checkbox.checked='+checkbox.checked)
console.log('checkedNum:' + checkedNum)*/
if (checkedNum !== checkbox1s.length) {
selectAllBtn.checked = false
} else if (checkedNum == checkbox1s.length) {
selectAllBtn.checked = true
}
}
})