jQuery实现全选&全不选&非全选

最新推荐文章于 2022-09-30 14:03:53 发布

一朵叶子

最新推荐文章于 2022-09-30 14:03:53 发布

阅读量4.5k

点赞数 5

分类专栏： jQuery 文章标签： jquery html 前端

本文链接：https://blog.csdn.net/yjy528/article/details/122943436

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.点击全选选中/取消所有复选框

2.取消某一个复选框，全选按钮不选中

3.勾选所有复选框后，全选按钮选中

html

<div>
        <div><input type="checkbox" name="checkbox" />复选框1</div>
        <div><input type="checkbox" name="checkbox" />复选框2</div>
        <div><input type="checkbox" name="checkbox" />复选框3</div>
        <div><input type="checkbox" name="checkbox" />复选框4</div>
        <div><input type="checkbox" name="checkbox" />复选框5</div>
        <br>
        <div><input type="checkbox" name="checkall" />全选</div>
    </div>

        $('input[name="checkall"]').click(function(){
            if($(this).is(':checked')){
                $('input[name="checkbox"]').each(function(){
                    $(this).prop("checked",true);
                });
            }else{
                $('input[name="checkbox"]').each(function(){
                    $(this).prop("checked",false);
                });
            } 
        });
        // 全选
        $('input[name="checkall"]').click(function(){
            if($(this).is(':checked')){
                $('input:checkbox[name=checkbox]').each(function(){
                    $(this).prop("checked",true);
                })
            }else{
                $('input:checkbox[name=checkbox]').each(function(){
                    $(this).prop("checked",false);
                })
            }
        })
        var ifAllChecked = true;
        // 是否全选-----是否选中全选按钮
        $('input:checkbox[name=checkbox]').click(function(){
            ifAllChecked = true
            $('input:checkbox[name=checkbox]').each(function(i){
                if(!$(this).is(':checked')){
                    // 有未选
                    ifAllChecked = false; 
                }
            });
            if(ifAllChecked){
                $('input[name="checkall"]').prop("checked",true);
            }else{
                $('input[name="checkall"]').prop("checked",false);
            }
        })