使用jQuery DataTables获取多复选框列选中项遇columns undefined错误

首先，咱们来拆解你遇到的问题：columns undefined错误并不是因为同时引入核心库和复选框插件导致的——只要引入顺序正确（先jQuery，再DataTables核心，最后Checkboxes插件），这两个库是完全兼容的。真正的问题出在插件未正确初始化以及代码里的几个小问题上，下面一步步帮你解决：

1. 核心问题：未配置DataTables Checkboxes插件的初始化选项 #

你现在的代码里只是初始化了DataTables，但没有告诉它哪几列是复选框列，这就导致columns().checkboxes.selected()方法无法被正确识别（因为插件没绑定到表格实例上）。

正确的初始化方式 #

在初始化DataTables时，必须添加checkboxes配置项，指定目标列（比如你表格里的第7、8列，对应Job Alert和Newsletter）：

$(document).ready(function() {
  $("#myTable").DataTable({
    // 其他DataTables配置（比如分页、排序等）
    columnDefs: [
      {
        targets: [6,7], // 注意：DataTables列索引从0开始，第7、8列对应索引6、7
        checkboxes: {
          selectRow: false // 如果不需要选中整行，设为false；需要的话设为true
        }
      }
    ]
  });
});

2. 修复HTML里的无效ID问题 #

你的表格中所有复选框的id="check"，这违反了HTML规范（ID必须唯一），会导致点击标签时触发错误的复选框，甚至干扰插件的正常工作。建议把ID改成唯一值，比如：

<!-- 第一行的复选框 -->
<td><input class="n_jobalert" id="check-ja-100" name="check-ja" type="checkbox"><label for="check-ja-100"><input type="hidden" class="lbljobalert" value="1" /></label></td>
<td><input class="n_newsletter" id="check-nl-100" name="check-nl" type="checkbox"><label for="check-nl-100"><input type="hidden" class="lblnewsletter" value="0" /></label></td>

<!-- 第二行的复选框 -->
<td><input class="n_jobalert" id="check-ja-102" name="check-ja" type="checkbox"><label for="check-ja-102"><input type="hidden" class="lbljobalert" value="0" /></label></td>
<td><input class="n_newsletter" id="check-nl-102" name="check-nl" type="checkbox"><label for="check-nl-102"><input type="hidden" class="lblnewsletter" value="1" /></label></td>

3. 修正获取选中项的代码 #

当插件正确初始化后，你可以通过指定列来获取选中项，或者遍历所有复选框列。另外，checkboxes.selected()返回的是选中的行数据（如果selectRow: true），或者需要自定义获取值的方式。如果要获取每个选中复选框对应的用户ID和类型（Job Alert/Newsletter），可以这样修改getSelected函数：

function getSelected(){
  var myTable = $("#myTable").DataTable();
  // 获取第7列（Job Alert）的选中项
  var selectedJA = myTable.column(6).checkboxes.selected();
  // 获取第8列（Newsletter）的选中项
  var selectedNL = myTable.column(7).checkboxes.selected();
  
  // 处理Job Alert选中项
  selectedJA.forEach(function(rowData) {
    // rowData是整行的数据数组，第2列是User ID（索引2）
    alert(`Job Alert选中用户ID: ${rowData[2]}`);
  });
  
  // 处理Newsletter选中项
  selectedNL.forEach(function(rowData) {
    alert(`Newsletter选中用户ID: ${rowData[2]}`);
  });
}

如果你的需求是直接获取DOM中的复选框值（而不是依赖插件的selected方法），也可以直接用jQuery选择器：

function getSelected(){
  // 获取所有选中的Job Alert复选框对应的用户ID
  $(".n_jobalert:checked").each(function(){
    var uid = $(this).closest("tr").find(".uid").text();
    alert(`Job Alert选中用户ID: ${uid}`);
  });
  
  // 获取所有选中的Newsletter复选框对应的用户ID
  $(".n_newsletter:checked").each(function(){
    var uid = $(this).closest("tr").find(".uid").text();
    alert(`Newsletter选中用户ID: ${uid}`);
  });
}

4. 确认引入顺序 #

最后再确认一下脚本的引入顺序，必须严格按照这个顺序：

<!-- jQuery -->
<script src="jquery.min.js"></script>
<!-- DataTables核心库 -->
<script src="jquery.dataTables.min.js"></script>
<!-- DataTables Checkboxes插件 -->
<script src="dataTables.checkboxes.min.js"></script>
<!-- 你的初始化和自定义脚本 -->
<script src="your-script.js"></script>

按照上面的步骤调整后，columns undefined的错误应该就能解决了，复选框的选中状态也能正确获取啦！

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