js实现checkBox全选效果

最新推荐文章于 2025-03-29 10:30:48 发布

Neic

最新推荐文章于 2025-03-29 10:30:48 发布

阅读量544

点赞数

分类专栏：前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/u012078155/article/details/108397848

版权

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种使用jQuery实现表格中全选功能的方法，通过点击表头的复选框，可以选中或取消选中表格中的所有数据行。同时，详细解释了如何在后台处理这些被选中的数据行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/** 全选或全不选事件 */
$(function () {
    //点击全选
    $(document).delegate("#checkAll", "click", function () {
        var isChecked = $(this).prop("checked");
        var $thisTable = $(this).parents(".commonTable");
        var $row = $thisTable.find("tbody tr");
        //考虑用fixHeaderTable插件的情况
        if ($row.length <= 0) {
            $row = $(this).parents(".fht-table-wrapper").find(".fht-tbody tbody tr");
        }
        for (var i = 0; i < $row.length; i++) {
            if (!isChecked) {
                $row.eq(i).find("input[type = 'checkbox']").prop("checked", false);
                $row.eq(i).removeClass("selected");
            } else {
                $row.eq(i).find("input[type = 'checkbox']").prop("checked", true);
                $row.eq(i).addClass("selected");
            }
        }
    });
});

效果：点击表头可以选中全部数据，再次点击取消选中下面全部数据

设置表头中的input的id="checkAll"，table的样式为commonTable

请求到后端的js方法：

function apply() {
    var checked = $("input[type='checkbox']:not(#checkAll):checked");
    if (!checked.length) {
        $.alert("没有选中任何一行", false);
    } else {
        art.dialog.confirm('请确认是否申报？', function () {
            var ids = "";
            checked.each(function () {
                ids += $(this).val() + ",";
            });
            ids = ids.substr(ids, ids.length - 1);
            $.pikaQajax({
                url: "/express-process/app-overshipment-apply",
                data: {"ids": ids},
                type: "post",
                success: function (data) {
                    if (data.status === 200) {
                        $.alert("申报成功", true);
                        $("input[type=checkbox]:not(#checkAll):checked").prop("checked", false);
                    } else {
                        $.alert(data.msg);
                    }
                }
            });
        }, function () {
            art.dialog.tips('你取消了操作');
            art.dialog.close();
        });
    }

}

=========================================================================

jquery版本：

function check_all(){
	var ck_flag = $("#ck_all")[0].checked;
	$(".content-list").find(".checkboxs").find("input[type='checkbox']").each(function(){
		this.checked = ck_flag;
	});
}

thead：
<th><input type="checkbox" id="ck_all" οnclick="check_all()" /></th>

tbody：
<td class="checkboxs"><input type="checkbox" name="declNo_checkbox" value="${item.assTransDocId }"/></td>