如何为jQuery DataTable自定义行级CheckBox点击事件？

我来帮你搞定这两个需求，这在DataTable的实际开发里是很常见的场景，下面分步骤给你说明：

一、为动态生成的CheckBox绑定点击事件 #

因为这些CheckBox是DataTable异步加载数据后动态生成的，直接用普通的click事件绑定会失效，必须用事件委托的方式，把事件绑定到页面加载时就存在的父元素（比如表格本身）上，监听dt-checkboxes类元素的点击。

实现代码 #

在你的DataTable初始化完成后，添加这段代码：

// 事件委托绑定CheckBox点击事件
$('#example').on('click', '.dt-checkboxes', function(){
    // 找到当前CheckBox所在的行，获取该行的完整数据对象
    const rowData = table.row($(this).closest('tr')).data();
    
    // 这里就可以拿到对应行的详情了，比如打印姓名和执照号
    console.log('选中的医生姓名:', rowData.FirstName);
    console.log('执照编号:', rowData.LicenseNo);
    
    // 如果需要提交数据到后端，这里可以写Ajax请求示例
    /*
    $.ajax({
        url: '@Url.Action("SubmitRowData")',
        type: 'POST',
        data: rowData,
        success: function(response){
            alert('数据提交成功！');
            // 可以在这里刷新表格或者做其他操作
        },
        error: function(){
            alert('提交失败，请重试');
        }
    });
    */
});

原理说明 #

• $(this).closest('tr')：找到当前点击的CheckBox所在的表格行
• table.row().data()：通过DataTable的API直接获取该行的原始数据对象，比手动从DOM节点取值更可靠，尤其是数据字段较多的时候

二、为CheckBox分配唯一ID #

你可以通过DataTable的render函数来自定义第一列的CheckBox，利用每行数据的唯一标识（比如LicenseNo，假设它是唯一的）来生成唯一ID。

修改后的columnDefs配置 #

把你原来的columnDefs改成下面这样：

"columnDefs": [
    { 
        'targets': 0, 
        'checkboxes': { 
            'selectRow': true 
        },
        // 自定义render生成带唯一ID的CheckBox
        'render': function(data, type, row){
            // 用执照号作为唯一标识，生成格式为checkbox-xxx的ID
            const checkboxId = `checkbox-${row.LicenseNo}`;
            return `<input type="checkbox" id="${checkboxId}" class="dt-checkboxes">`;
        }
    }
],

同时要注意，第一列的columns配置要改成{ "data": null }，因为这一列不需要绑定具体的数据字段，完全由render生成内容：

"columns": [
    { "data": null }, // 第一列是自定义的CheckBox，无需绑定数据
    { "data": "FirstName" },
    { "data": "LicenseNo" }
],

完整的前端代码示例 #

整合后的完整代码可以直接参考：

<link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet" />
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/css/dataTables.checkboxes.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/js/dataTables.checkboxes.min.js"></script>
<script>
$(document).ready(function () {
    const table = $('#example').DataTable({
        "ajax": {
            url: '@Url.Action("GetData")',
            type: "get",
            datatype: "json",
            data: {}
        },
        "columnDefs": [
            { 
                'targets': 0, 
                'checkboxes': { 
                    'selectRow': true 
                },
                'render': function(data, type, row){
                    const checkboxId = `checkbox-${row.LicenseNo}`;
                    return `<input type="checkbox" id="${checkboxId}" class="dt-checkboxes">`;
                }
            }
        ],
        "columns": [
            { "data": null },
            { "data": "FirstName" },
            { "data": "LicenseNo" }
        ],
        'select': { 'style': 'multi' },
        'order': [[1, 'asc']]
    });

    // 绑定CheckBox点击事件
    $('#example').on('click', '.dt-checkboxes', function(){
        const isChecked = $(this).is(':checked');
        const rowData = table.row($(this).closest('tr')).data();
        
        console.log(`CheckBox状态: ${isChecked ? '已选中' : '已取消'}`);
        console.log('行详情:', rowData);
        
        // 根据选中状态执行不同操作
        if(isChecked){
            // 选中时提交数据到后端
            /*
            $.post('@Url.Action("SaveSelectedRow")', rowData, function(res){
                console.log('数据保存成功:', res);
            });
            */
        } else {
            // 取消选中时的操作，比如删除已提交的记录
        }
    });
});
</script>
<body>
<div>
    <hr><br>
    <form>
        <table id="example" class="display" cellspacing="0">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>License No</th>
                </tr>
            </thead>
        </table>
        <hr>
    </form>
</div>
</body>

一些注意事项 #

• 事件委托的父元素必须是页面加载时就存在的静态元素，这里用表格#example是最稳妥的选择
• 生成唯一ID时，要确保你用到的字段（比如LicenseNo）在数据库中是唯一的，如果有专门的主键ID字段，用主键ID会更可靠
• 尽量使用DataTable提供的API（比如row().data()）来获取行数据，避免手动操作DOM，这样代码更健壮，也更易维护

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