如何在jQuery DataTable中获取复选框状态并提交至控制器

你的核心问题是DataTable存储的行数据（value.status）和前端复选框的实际状态未同步——初始加载时status值为1，但用户勾选/取消复选框后，DataTable内部的行数据并未更新，导致提交时始终拿到初始值。

以下是两种直接可行的解决方案：

方案一：提交时直接遍历DOM获取复选框状态 #

无需额外监听事件，在提交循环中通过行索引匹配对应DOM节点的复选框状态：

修改提交代码如下：

$("#sendToController").on('click', function() {
    var dataArray = [];
    var table = $('#example').DataTable();
    var rows = table.rows().nodes(); // 获取所有行的DOM节点
    var data = table.rows().data();

    data.each(function (value, index) {
        // 通过行索引定位对应行的复选框
        var checkbox = $(rows[index]).find('.editor-active');
        dataArray.push({
            Name: value.name,
            Status: checkbox.is(':checked') ? 1 : 0 // 按勾选状态赋值
        });
    });

    $.ajax({
        method: 'post',
        url: "/Home/StartCheckTest",
        contentType: 'application/json',
        data: JSON.stringify(dataArray),
        success: function (event){}
    });
});

方案二：监听复选框事件，实时更新DataTable行数据 #

如果需要DataTable内部数据与UI状态始终同步，可给复选框绑定change事件，实时更新对应行的status值：

第一步：优化列渲染，添加初始选中状态 #

修改DataTable列定义中的render函数，根据初始status值设置复选框默认状态：

columns: [
    { "width": "1%", "className":"dt-body-left", 'data': "name" },
    {
        "width": "5%",
        'data':   "status",
        "render": function (data, type, row){
            if (type === 'display'){
                // 根据初始status值决定是否勾选
                var checkedAttr = data === 1 ? 'checked' : '';
                return '<input type="checkbox" class="editor-active" name="chkbx1" value="col0" ' + checkedAttr + '>';            
            }
            return data;               
        },
        className: "dt-body-left"
    },
]

第二步：绑定复选框状态变更事件 #

添加事件监听，更新DataTable行数据：

// 监听表格内所有复选框的状态变化
$('#example').on('change', '.editor-active', function() {
    var $row = $(this).closest('tr');
    var tableRow = $('#example').DataTable().row($row);
    // 根据勾选状态更新status值
    tableRow.data().status = $(this).is(':checked') ? 1 : 0;
    tableRow.invalidate(); // 通知DataTable数据已更新
});

第三步：使用原提交代码即可 #

此时value.status已与复选框状态同步，直接用你原来的提交逻辑即可：

$("#sendToController").on('click', function() {
    var dataArray = [];
    var table = $('#example').DataTable();
    var data = table.rows().data();
    data.each(function (value, index) {
        dataArray.push({
            Name: value.name,
            Status: value.status,
        });
    });

    $.ajax({
        method: 'post',
        url: "/Home/StartCheckTest",
        contentType: 'application/json',
        data: JSON.stringify(dataArray),
        success: function (event){}
    });
});

方案选择建议 #

• 方案一适合简单提交场景，无需维护数据同步，提交时一次性获取状态；
• 方案二更适合需要在其他操作中复用最新status值的场景，确保数据与UI始终一致。

内容的提问来源于stack exchange，提问作者niks