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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院