多Datatables表格复选框全选/取消全选功能错位异常排查

• 函数重名覆盖：你定义了两个同名checkGroups函数，后定义的操作schedule类复选框的函数会覆盖先定义的group类操作函数，这是点击group表格按钮反而操作schedule复选框的核心原因
• 循环操作语法错误：getElementsByClassName返回DOM元素集合，你直接给集合赋值inputs.checked不会生效，必须指定下标inputs[i].checked才能操作到单个复选框
• 函数名调用不匹配：schedule表格的按钮绑定了不存在的checkScheds函数
• 工具栏选择范围错误：全局选择div.toolbar会同时修改所有表格的工具栏，需要限定在当前表格的父级范围内选择

<script>
var checkflag = "false";
function checkGroups() {
  var inputs = document.getElementsByClassName('group');
  if (checkflag == "false") {
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = true;
    }
    checkflag = "true";
    return "Deselect All";
  } else {
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = false;
    }
    checkflag = "false";
    return "Select All";
  }
}

var checkflag2 = "false";
function checkScheds() {
  var inputs2 = document.getElementsByClassName('schedule');
  if (checkflag2 == "false") {
    for (var i = 0; i < inputs2.length; i++) {
      inputs2[i].checked = true;
    }
    checkflag2 = "true";
    return "Deselect All";
  } else {
    for (var i = 0; i < inputs2.length; i++) {
      inputs2[i].checked = false;
    }
    checkflag2 = "false";
    return "Select All";
  }
}
</script>

<div class="card-body">
  <div class="card-datatable table-responsive">
  <table id="request-list" class="table table-striped " style="border-style: none; ">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <cfloop query="grouplist">
      <tr>
        <td>
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input group" value="#id#" name="group" id="group">
              <span class="custom-control-label">#displayname#</span>
          </label>
        </td>
      </tr>
    </cfloop>
  </table>
  </ul>
</div>

<div class="card-body">
  <div class="card-datatable table-responsive">
  <table id="schedule-list" class="table table-striped " style="border-style: none; ">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <cfloop query="schedulelist">
      <tr>
        <td>
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input schedule" value="#id#" name="schedule" id="schedule">
              <span class="custom-control-label">#displayname#</span>
          </label>
        </td>
      </tr>
    </cfloop>
  </table>
  </ul>
</div>

<script>
$(document).ready(function() {
    $('#request-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    // 限定只修改当前表格对应的工具栏
    $('#request-list').closest('.card-datatable').find("div.toolbar").html('<input class="btn btn-primary btn-sm md-btn-flat ml-3 checkall" type="button" name="CheckAll" id="checkall" value="Select All" onClick="this.value=checkGroups()" style="float:left;">');
} );


$(document).ready(function() {
    $('#schedule-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    // 限定只修改当前表格对应的工具栏
    $('#schedule-list').closest('.card-datatable').find("div.toolbar").html('<input class="btn btn-primary btn-sm md-btn-flat ml-3 checkall2" type="button" name="CheckAll2" id="checkall2" value="Select All" onClick="this.value=checkScheds()" style="float:left;">');
} );
</script>

如果后续要给另外2个表格加全选功能，建议封装通用函数，不用每个表格单独写一套逻辑，只需要传入复选框类名和状态变量即可，减少冗余代码。

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