如何获取jQuery DataTables单元格中所有复选框状态（含未选中）

咱们先梳理下你遇到的核心问题：直接通过innerHTML.getElementById获取复选框状态是行不通的——因为innerHTML返回的是字符串，不是DOM元素，没法直接调用DOM方法。另外，直接操作原生表格的rows可能会漏掉分页、搜索后的行，咱们应该用DataTables提供的API来更可靠地处理数据和DOM元素。

第一步：修正DataTables初始化的语法错误 #

你的初始化代码里，columns参数被错误地嵌套在了columnDefs内部，这会导致表格渲染异常。同时咱们可以优化复选框的渲染逻辑，根据后台返回的数据自动设置初始选中状态：

function LoadProduct(element) {
    $.ajax({
        url: '/ADM_MAS_Privilege/GetFormData',
        data: { YourValue: $('#productCategory').val() },
        method: 'post',
        dataType: 'json',
        success: function (data) {
            $('#jqueryTable').dataTable({
                paging: true,
                sort: true,
                searching: true,
                scrollY: 200,
                data: data,
                bDestroy: true,
                columnDefs: [{
                    targets: [2, 3, 4],
                    render: function (data, type, row, meta) {
                        // 根据后台返回的data值（如true/false、1/0）设置复选框初始状态
                        const checkedAttr = data ? 'checked' : '';
                        // 去掉重复的id，用class选择更安全，name保留分组标识即可
                        return type === 'display' ? 
                            `<input type="checkbox" class="chk" name="group${meta.row}" ${checkedAttr} />` : 
                            data;
                    }
                }],
                columns: [
                    { data: "ID", autoWidth: true },
                    { data: "PRIV_Name_Str", autoWidth: true },
                    { data: "Create", autoWidth: true },
                    { data: "Edit", autoWidth: true },
                    { data: "View", autoWidth: true }
                ]
            });
        }
    });
}

第二步：正确获取所有复选框状态的两种方法 #

方法一：使用DataTables API（推荐）

DataTables的API可以轻松处理分页、搜索后的行数据，同时关联对应的DOM元素获取复选框状态：

$('#upload').click(function () {
    const table = $('#jqueryTable').DataTable();
    const tableArr = [];

    // 遍历所有搜索过滤后的行（如果要遍历全部数据，去掉{ search: 'applied' }即可）
    table.rows({ search: 'applied' }).every(function() {
        const rowData = this.data();
        const rowNode = this.node();
        
        // 找到当前行的三个复选框
        const createChk = $(rowNode).find('td:eq(2) .chk')[0];
        const editChk = $(rowNode).find('td:eq(3) .chk')[0];
        const viewChk = $(rowNode).find('td:eq(4) .chk')[0];

        tableArr.push({
            ID: rowData.ID,
            PRIV_Name_Str: rowData.PRIV_Name_Str,
            Create: createChk.checked, // 存储布尔值，也可以转成1/0：createChk.checked ? 1 : 0
            Edit: editChk.checked,
            View: viewChk.checked
        });
    });

    console.log(tableArr); // 查看最终的数组数据
});

方法二：原生DOM操作（适合习惯原生JS的场景）

如果你更倾向于操作原生DOM，需要先通过DataTables获取正确的行节点，再查找复选框：

$('#upload').click(function () {
    const table = $('#jqueryTable').DataTable();
    const tableArr = [];

    // 获取所有可见行的DOM节点
    const rowNodes = table.rows({ search: 'applied' }).nodes();
    
    rowNodes.each(function(rowNode) {
        const cells = rowNode.cells;
        
        // 通过class选择器找到单元格内的复选框
        const createChk = cells[2].querySelector('.chk');
        const editChk = cells[3].querySelector('.chk');
        const viewChk = cells[4].querySelector('.chk');

        tableArr.push({
            ID: cells[0].textContent,
            PRIV_Name_Str: cells[1].textContent,
            Create: createChk.checked,
            Edit: editChk.checked,
            View: viewChk.checked
        });
    });

    console.log(tableArr);
});

关键要点总结 #

1. 避免重复ID：你的复选框id设置为p会导致页面出现多个相同id的元素，违反HTML规范，改用class选择器更可靠。
2. 优先使用DataTables API：直接操作原生表格rows可能会漏掉分页、搜索后的行，API能确保获取到所有需要的数据。
3. 正确获取DOM元素：不能通过innerHTML调用DOM方法，要通过行节点或单元格节点去查找子元素（比如find()或querySelector()）。

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