功能--实现多选框的全部选中效果

最新推荐文章于 2025-09-26 15:09:25 发布

原创最新推荐文章于 2025-09-26 15:09:25 发布 · 705 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript

文章介绍了如何使用HTML和JavaScript来实现一个可点击的全选框，当全选框被选中时，所有其他单选框会被选中；反之，取消全选则所有单选框会被取消选中。

实现功能

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;
    }
}