checkbox全选与非全选之间的切换

最新推荐文章于 2023-02-15 10:37:57 发布

Mr.Gu

最新推荐文章于 2023-02-15 10:37:57 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/loveamyforever/p/6179917.html

版权

<div id="congras_area">
    <input type="checkbox" name="" id="congrasCheck" />全选
    <input type="checkbox" name="" />
    <input type="checkbox" name="" />
    <input type="checkbox" name="" />
</div>

 p{width:20px; height:20px;}
.more{width:20px; height:20px; background: #fcf;}

         $(document).ready(function(){
            var checkCount = $("input[type=checkbox]").size();//checkbox的总个数
            var checkSonCount = $("input[type=checkbox]:not(#congrasCheck)").size();//除全选框外的个数
            console.log(checkCount);

            $("input[type=checkbox]:not(#congrasCheck)").change(function(){
                var selectedCount = $("input[type=checkbox]:not(#congrasCheck):checked").size();//除全选框外的多选框选中的个数
                console.log(selectedCount);
                if(selectedCount==checkSonCount){
                    $("#congrasCheck").prop('checked',true);
                }else{
                    $("#congrasCheck").prop('checked',false);
                    if(selectedCount==0){
                        $("p").addClass("more");
                    }else{
                        $("p").removeClass("more");
                    }
                }
                if($(this).prop("checked")){
                    console.log("dddd");
                }
            });
            $("#congrasCheck").change(function(){
                if($(this).prop("checked")){
                    $("input[type=checkbox]:not(#congrasCheck)").prop('checked',true);
                }else{
                    $("input[type=checkbox]:not(#congrasCheck)").prop('checked',false);
                    $("p").addClass("more");
                }
            });
        });