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

                }

            });

        });