js全选和反选

这篇博客探讨了如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值