**全选**
(1)对全选按钮获取点击事件;
(2) 我们需要做的就是把全选框的checked 给下面三个小按钮。因为三个按钮在伪数组里面,我们需要遍历的方式,挨个取出来,依次给值;
(3)当我们的全选按钮处于选中状态,改为取消。
// 获取元素
let all = document.querySelector("#checkAll");
let cks = document.querySelectorAll(".ck");
let span = document.querySelector("span");
// 全部勾选
all.addEventListener("click", function () {
for (i = 0; i < cks.length; i++) {
cks[i].checked = all.checked;
}
// 全选取消文字变换
if (all.checked) {
span.innerHTML = "取消";
} else {
span.innerHTML = "全选";
}
});
**反选**
(1)遍历小按钮,同时给多个元素绑定相同点击事件;
(2)只要点击任何一个小按钮,都要遍历所有的小按钮,看看是不是有没选中的,如果有则设置全选按钮为未选中,并退出循环,结束函数;
(3)当我循环结束但没有退出函数,说明都被选中了,则全选按钮要选中。
// 反选
for (let i = 0; i < cks.length; i++) {
// 绑定事件
cks[i].addEventListener("click", function () {
// 只要点击任何一个小按钮,都要遍历所有的小按钮
for (let j = 0; j < cks.length; j++) {
if (cks[j].checked === false) {
// 如果有false 则退出循环 结束函数
all.checked = false;
span.innerHTML = "全选";
return;
}
}
// 当我们的循环结束,如果代码走到这里,说明没有false,都被选中了,则全选按钮要选中
all.checked = true;
span.innerHTML = "取消";
});
}