js全选和反选

最新推荐文章于 2021-08-28 20:41:46 发布

原创最新推荐文章于 2021-08-28 20:41:46 发布 · 303 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript

JavaWeb学习专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了如何使用JavaScript实现checkbox全选和反选功能。文章讲解了checked属性在选中和未选中状态下的值，并提供了实现全选操作的逻辑，即在全选框被点击时，将所有其他checkbox设置为选中状态。同时，介绍了通过判断全选框的checked属性值来控制所有子项的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

checkbox的checked属性
当被选中时为true
没有被选中时为false

全选的操作就是在点击checkbox的时候将其他的checkbox复选框一起选为checked=‘’true“状态
判断条件为全选框的checked属性值

js代码

          function testAllCheckbox() {
            //获得checkbox列表
            var boxs = document.getElementsByName("check");
            //获得按钮的对象
            var all = document.getElementById("all");
            if(all.checked){ //由于默认为false，所以全选在false代码块里
                for(var j=0;j<boxs.length;j++){
                    boxs[j].checked=false;
                }
            }else {
                for (var i = 0; i < boxs.length; i++) {
                    boxs[i].checked = true;
                }
            }
        }

html代码

<form action="" method="get">
    <input type="checkbox" name="check" id="" value="0"/>LOL
    <input type="checkbox" name="check" id="" value="0"/>睡觉
    <input type="checkbox" name="check" id="" value="0"/>吃饭
    <input type="checkbox" name="check" id="" value="0"/>看电影
    <input type="checkbox" name="check" id="" value="0"/>听歌
    <br>
    <input type="button" id="all" onclick="testAllCheckbox()" value="全选"/>
</form>