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

最新推荐文章于 2022-03-01 14:35:00 发布

向阳天123

最新推荐文章于 2022-03-01 14:35:00 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏： checkbox 文章标签： checkbox

本文链接：https://blog.youkuaiyun.com/qq_16636045/article/details/78403505

checkbox 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的全选复选框功能实现方式，并通过querySelectorAll选择器来判断是否所有选项都被选中。当所有选项被选中时，全选复选框也会被选中。

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

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