<input type="checkbox" class="checkAll">
<span class="info">全选</span>
<hr>
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
let checkAll = document.querySelector('.checkAll')
let checkList = document.querySelectorAll('.check')
let info = document.querySelector('.info')
checkAll.onchange = function() {
info.innerText = this.checked ? "取消全选" : "全选"
for (let i = 0; i < checkList.length; i++) {
checkList[i].checked = this.checked
}
}
for (let i = 0; i < checkList.length; i++) {
checkList[i].onchange = function() {
for (let j = 0; j < checkList.length; j++) {
if (!checkList[j].checked) {
checkAll.checked = false
info.innerText = checkAll.checked ? "取消全选" : "全选"
return
}
}
checkAll.checked = true
info.innerText = checkAll.checked ? "取消全选" : "全选"
}
}