全选与全不选

复选框最基本样式

<input type="checkbox" class="checkall">
    <label for="">全选</label>

    <div>
        <input type="checkbox" checked class="j-checkbox">
    </div>
    <div>
        <input type="checkbox" class="j-checkbox">
    </div>
    <div>
        <input type="checkbox" class="j-checkbox">
    </div>
    <div>
        <input type="checkbox" class="j-checkbox">
    </div>
    <div>
        <input type="checkbox" class="j-checkbox">
    </div>
    <div>
        <input type="checkbox" class="j-checkbox">
    </div>
    <div>
        <input type="checkbox" class="j-checkbox">
    </div>

    <input type="checkbox" class="checkall">
    <label for="">全选</label>

jQuery 方法的全选与全不选

/* 
            思路:
                里面的复选框按钮(j-checkbox) 选中状态 (checked) 跟着全选按钮 (checkeall) 走
                因为 checked 是复选框的固有属性  此时需要利用pror()方法获取和设置该属性
                把全选按钮状态赋值给复选框就可以了
                当每次点击复选框时就判断
                如果复选框的个数相等就把全选按钮选上   否则全选按钮不选
        */
        $(function(){//入口函数
            $(".checkall").change(function() {//获取全选框 使用change改变 状态
                //获取复选框利用 prop()设置  input的固有状态(checked)
                $(".j-checkbox, .checkall").prop("checked",$(this).prop("checked"))
            });
            $(".j-checkbox").change(function() {//获取复选框
                if( $(".j-checkbox:checked").length === $(".j-checkbox").length ){//判断复选框的元素的长度 === 复选框的长度  可以得到复选框有没有全部选中状态
                    $(".checkall").prop("checked",true);//当 判断 成立 让全选框为true  也就是当复选框全部选中时  全选框也为全选状态
                } else {//否则  也就是  复选框元素的长度  不等于  复选框的长度时  就是复选框没有在全部选中状态时
                    $(".checkall").prop("checked",false);//让全选框为false  也就是当复选框没有全部选中时  全选框也不选中
                }
            })
        });