复选框全选&取消全选

效果图

<script>
    $(function () {
        $('#checkAll').click(function () {
            //全选按钮状态
            var checkStatus = this.checked;
            $("input[name='userCheckbox']").attr("checked", checkStatus);
        });

        $("input[name='userCheckbox']").click(function () {
            //获取选中复选框长度
            var length = $("input[name='userCheckbox']:checked").length;
            //未选中的长度
            var len = $("input[name='userCheckbox']").length;
            if (length == len) {
                $("#checkAll").attr("checked", true);
            } else {
                $("#checkAll").attr("checked", false);
            }
        });

    });
</script>


<th>
    <input type="checkbox" id="checkAll" name="checkAll">
</th>
<td>
    <input type="checkbox" name="userCheckbox">
</td>