jQuery操作Checkbox

页面离不开表格，表格肯定会有Checkbox列
jQuery操作checkbox，控制选中，或者取消选中
全选，反选
表格checkbox列，最上面有两个按钮

// 全选
table.find(".check-all").off("click").on("click", function () {
    var checkAll = $(this);
    if (checkAll.text() == '全选') {
        checkAll.text("取消");
        table.find("td.check :checkbox").prop("checked", true).closest("tr").addClass(activeClass);
    } else {
        checkAll.text("全选");
        table.find("td.check :checkbox").prop("checked", false).closest("tr").removeClass(activeClass);
    }
    $.table.changeBtnState(table);
});
// 反选
table.find(".reverse-all").off("click").on("click", function () {
    table.find("td.check :checkbox").each(function () {
        var checkbox = $(this);
        var checked = checkbox.is(":checked");
        if (checked) {
            checkbox.closest("tr").removeClass(activeClass);
        } else {
            checkbox.closest("tr").addClass(activeClass);
        }
        checkbox.prop("checked", !checked);
        $.table.changeBtnState(table);
    });
});

全选，全不选
表格，checkbox列最上方，有一个checkbox

// 全选、全不选
table.find(".checkboxButton").off("click").on("click", function () {
    var checkbox = document.getElementById("checkall");
    var status = checkbox.checked;
    var elem = document.getElementsByClassName("check");
    if (status) {
        for (var i = 0; i < elem.length; i++) {
            elem[i].checked = true;
        }
        table.find("tbody tr").attr("class", "");
        table.find("tbody tr").attr("class", "selectRow");
    } else {
        for (var i = 0; i < elem.length; i++) {
            elem[i].checked = false;
        }
        table.find("tbody tr").attr("class", "");
    }
});

单选，单击checkbox
这里，代码做了一个逆向
单击，行的checkbox，第一行的td，肯定会触发行点击事件，它会先执行checkbox单击事件，再执行行点击事件
单击，行的其他单元格td，并不会触发checkbox单击事件，只会执行行点击事件
单选，checkbox，如果是单击选中，取消选中，抵消了对checkbox的操作，在行点击事件里面，对checkbox的状态进行操作

// 单选
table.find(".check").off("click").on("click", function () {
    var elem = this;
    var checkbox = document.getElementById("checkall");
    var status = elem.checked;
    if (status) {
        elem.checked = false;
    } else {
        elem.checked = true;
    }
});

单选，单击该行

// 选中行
$("tbody tr").click(function () {
    // 控制选中后的样式
    var className = $(this).attr('class');
    if (className == null || className == "") {
        $(this).addClass("selectRow");
    } else {
        $(this).attr("class", "");
    }
    // checkbox表头，是否选中
    var elem = $(this).find(".check");
    var status = elem.is(":checked");
    if (status) {
        // 取消选中行
        elem.prop("checked", false);
    } else {
        // 选中行
        elem.prop("checked", true);
    }
    var elem = $(this).find(".check");
    var checkStatus = elem.is(":checked");
    // 该行选中状态
    if (checkStatus) {
        // 获取改行checkbox的class
        var className = (elem.attr('class'));
        // 获取所有行的checkbox
        var elems = document.getElementsByClassName(className);
        for (var i = 0; i < elems.length; i++) {
            if (!elems[i].checked) {
                return;
            }
        }
        // 选中表头
        $('#checkall').prop("checked", true);
    } else {
        // 取消选中表头
        $('#checkall').prop("checked", false);
    }
});

表头

<th class="checkboxStyleTh">
    <input id="checkall" class="checkboxButton" type="checkbox"/>
</th>

行

<td><input type="checkbox" class="check" value="${m.id}" name="ids"></td>