实现功能
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;
}
}