如何一键勾选或取消勾选 DataTables 表格中的所有复选框？

勾选/取消勾选 DataTables 页面中的所有复选框

对于使用 JavaScript 库 DataTables 创建表格的开发人员来说，勾选或取消勾选页面中的所有复选框是一项常见的任务。虽然这可以通过遍历每个复选框单独进行，但有一种更有效的方法可以同时影响所有复选框。本指南将介绍如何使用全局变量和循环来实现这一点。

第 1 步：设置全局变量

首先，创建一个全局变量来存储复选框的状态。这将允许我们在每次单击表头复选框时跟踪其状态。

let allChecked = false;

第 2 步：初始化 DataTables

使用 DataTables 初始化表格，并添加额外的事件监听器以侦听表头复选框的更改。

var table = new DataTable('#example', {
  responsive: true,
  "lengthMenu": [20, 40, 60, 80, 100],
  "pageLength": 10
});

$('#example thead th:first-child input[type=checkbox]').on('change', function() {
  allChecked = this.checked;
});

第 3 步：创建循环

使用循环遍历表中所有复选框，根据表头复选框的状态对其进行勾选或取消勾选。

$('#example tbody tr').each(function() {
  var checkbox = $(this).find('input[type=checkbox]');

  if (allChecked) {
    checkbox.prop('checked', true);
  } else {
    checkbox.prop('checked', false);
  }
});

第 4 步：更新全局变量

在循环中更新 allChecked 变量以反映当前复选框的状态。

allChecked = checkbox.prop('checked');

通过遵循这些步骤，你可以轻松地勾选或取消勾选 DataTables 页面中的所有复选框，仅针对复选框，而不是整行。

常见问题解答

Q1：这种方法是否适用于大型表格？

A：是的，这种方法适用于任意大小的表格。它不会影响表格的性能。

Q2：我可以为每个复选框设置单独的状态吗？

A：是的，你可以在循环中添加其他逻辑，根据需要为每个复选框设置单独的状态。

Q3：这种方法是否适用于其他 JavaScript 库？

A：这种方法可能适用于其他 JavaScript 库，但可能需要针对其 API 进行一些调整。

Q4：如何阻止表头复选框也受循环的影响？

A：在循环中添加一个条件语句，检查当前复选框是否是表头复选框，并跳过它。

Q5：如何使用 jQuery 来实现此功能？

A：代码可以修改为使用 jQuery：

$('#example thead th:first-child input[type=checkbox]').on('change', function() {
  allChecked = $(this).prop('checked');
});

$('#example tbody tr').each(function() {
  $(this).find('input[type=checkbox]').prop('checked', allChecked);
});