如何捕获jQuery DataTables表格行选中时的checkbox点击或变更事件

云上老周

2026-9-25

解决方案

情况1：自定义表格内的checkbox列（未使用Select扩展）

DataTables的表格行是动态渲染的，直接给checkbox绑定事件会在分页、搜索重绘后失效，用事件委托绑定到静态父容器即可：

// #yourDataTableId替换为你的表格ID，#operateLink替换为你要控制的链接ID
$('#yourDataTableId').on('change', 'input[type="checkbox"]', function() {
  // 可替换为你自己的选中行统计逻辑
  const checkedCount = $('#yourDataTableId input[type="checkbox"]:checked').length;
  if(checkedCount > 0) {
    $('#operateLink').removeClass('disabled').attr('disabled', false);
  } else {
    $('#operateLink').addClass('disabled').attr('disabled', true);
  }
});

全选checkbox的变更也会触发该事件，不需要额外单独绑定。

情况2：使用Select扩展的场景

之前没生效大概率是没有绑定Select扩展提供的内置事件，直接监听select和deselect事件即可，会在行选中/取消选中时自动触发：

const table = $('#yourDataTableId').DataTable({
  // 保留你原来的初始化配置，新增开启select配置
  select: {
    style: 'os',
    selector: 'td:first-child input[type="checkbox"]' // 绑定到行首的checkbox
  }
});

// 同时监听选中和取消选中事件
table.on('select deselect', function () {
  const selectedCount = table.rows({ selected: true }).count();
  selectedCount > 0 ? $('#operateLink').removeAttr('disabled') : $('#operateLink').attr('disabled', true);
});