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

<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");
                }
            });
        });

http://jsbin.com/tonibogaco/edit?html,output

多选框没有一个被选中的情况下添加.more类

效果相反的效果：

http://jsbin.com/juviyojole/edit?html,output

只要有一个多选框被选中就添加.more类