​

 实现功能

1、点击全部可以选中所有checkbox

1、选中所有checkbox可以选中全部

HTMl代码

<div id="checkbox">
    选择：
    <input type="checkbox" name="all" id="all" />全部
    <input type="checkbox" value="sleep" name="hobby" />睡觉
    <input type="checkbox" value="eat" name="hobby" />吃饭
    <input type="checkbox" value="play" name="hobby" />玩耍
    <input type="checkbox" value="read" name="hobby" />阅读
    <input type="checkbox" value="write" name="hobby" />写作
</div>

JS代码

const checkbox = document.getElementById("checkbox");
const value = document.getElementsByName("hobby");
const all = document.getElementById("all");
all.addEventListener("click", allCheck);
for (let i = 0; i < value.length; i++) {
    value[i].addEventListener("click", ifAll);
}
// 全选
function allCheck() {
    if (all.checked) {
        for (let i = 0; i < value.length; i++) {
            value[i].checked = true;
        }
    }
    if (!all.checked) {
        for (let i = 0; i < value.length; i++) {
            value[i].checked = false;
        }
    }
}
//判断是否全选
function ifAll() {
    for (let i = 0; i < value.length; i++) {
        if (!value[i].checked) {
            all.checked = false;
            return;
        }
        all.checked = true;
    }
}

​