关于全选和全部选及个别操作

<body>
    <label for="nice1" class="labels"><input type="checkbox" id="nice1" name="nice" class="hello">选项一</label>
    <label for="nice2" class="labels"><input type="checkbox" id="nice2" name="nice" class="hello">选项二</label>
    <label for="nice3" class="labels"><input type="checkbox" id="nice3" name="nice" class="hello">选项三</label>
    <label for="nice4" class="labels"><input type="checkbox" id="nice4" name="nice" class="hello">选项四</label>
    <label for="nice5" class="labels"><input type="checkbox" id="nice5" name="nice" class="hello">选项五</label>
    <label for="nice6" class="labels"><input type="checkbox" id="nice6" name="nice" class="hello">选项六</label>
    <label for="nice7" class="labels"><input type="checkbox" id="nice7" name="nice" class="hello">选项七</label>
    <label for="nice8" class="labels"><input type="checkbox" id="nice8" name="nice" class="hello">选项八</label>
    <label for="nice9" class="labels"><input type="checkbox" id="nice9" name="nice" class="hello">选项九</label>
    <label for="nice10" class="labels"><input type="checkbox" id="nice10" name="nice" class="hello">选项十</label>
    <label for="all_c" class="all"><input type="checkbox" id="all_c" class="all_c">全选</label>
<script>
    $(function(){
        $('.hello').click(function(){
            var cel=document.querySelectorAll('input[name="nice"]:checked');
            console.log(cel.length);
            if(cel.length==$('.hello').length){
                $('.all_c').prop('checked',true);
            }else{
                $('.all_c').prop('checked',false);
            }
        });
        $('.all_c').click(function(){
            if($(this).is(":checked")){
                $('.hello').prop('checked',true);
            }else{
                $('.hello').prop('checked',false);
            }
        });
    })
</script>

发现这个querySelectorAll()挺好用的,但是好像兼容不是很好,不过可以学习一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 JavaScript 来实现 HTML 复选框的全选和取消全选。 首先,需要在 HTML 中为全选复选框和其他子复选框添加相应的 ID 或 class,例如: ```html <label><input type="checkbox" id="check-all">全选</label> <label><input type="checkbox" class="sub-check">选项1</label> <label><input type="checkbox" class="sub-check">选项2</label> <label><input type="checkbox" class="sub-check">选项3</label> ``` 然后,可以使用以下 JavaScript 代码来实现全选和取消全选功能: ```javascript // 获取全选复选框和子复选框元素 var checkAll = document.getElementById('check-all'); var subChecks = document.getElementsByClassName('sub-check'); // 全选/取消全选操作 checkAll.onclick = function() { for (var i = 0; i < subChecks.length; i++) { subChecks[i].checked = checkAll.checked; } } // 子复选框状态改变时,检查是否全部选中 for (var i = 0; i < subChecks.length; i++) { subChecks[i].onclick = function() { var checkedCount = 0; for (var j = 0; j < subChecks.length; j++) { if (subChecks[j].checked) { checkedCount++; } } checkAll.checked = (checkedCount == subChecks.length); } } ``` 以上代码中,首先获取全选复选框和子复选框的元素,然后为全选复选框绑定点击事件,当全选复选框状态改变时,遍历所有子复选框,将它们的选中状态与全选复选框的状态保持一致。同时,为每个子复选框绑定点击事件,当子复选框状态改变时,遍历所有子复选框,检查是否全部选中,如果是,则将全选复选框选中,否则取消选中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值