<script>
//获取DOM元素
let checkAll = document.querySelector('#checkAll')
let ck = document.querySelectorAll('.ck')
let all = document.querySelector('.all')
checkAll.addEventListener('click', function () {
ck.forEach(function (v, i) {
let state = checkAll.checked
v.checked = state
all.innerHTML = state ? '取消' : '全选'
})
})
ck.forEach(function (v, i) {
v.addEventListener('click', function () {
//使用伪类选择器拿到被选中按钮的数量
let count = document.querySelectorAll('.ck:checked').length
//判断选中单选复选框的数量等于单选复选框总数量吗?
if (count === ck.length) {
//等于就全选
checkAll.checked = true
all.innerHTML = '取消'
} else {
//不等于就取消全选
checkAll.checked = false
all.innerHTML = '全选'
}
})
})
</script>
思路:
全选的核心思路是判断单选复选框的选中状态,遍历每个单选复选框,判断选中状态(checked)是 false还是true,如果有一个是false则把全选按钮的选中状态设置为false,如果都是true则把全选框状态设置为true.
实现方式:
1.实现全选和全不选:
获取DOM元素,为全选按钮添加单击事件,遍历伪数组
把全选复选框的状态赋值个所以的单选复选框
2.实现点击单选复选框全选和不全选 :
遍历伪数组,为每个单选复选框绑定点击事件,
使用伪类选择器拿到被选中按钮数量
let count = document.querySelectorAll('.ck:checked').length
3.判断选中单选复选框的数量等于单选复选框总数量吗?
if (count === ck.length) {
//等于就全选
checkAll.checked = true
all.innerHTML = '取消'
} else {
//不等于就取消全选
checkAll.checked = false
all.innerHTML = '全选'
}
\
