问题 select 和 deselect 复选框范围

Question

我的页面上有 4 个单独的数据table。每个 table 都有一个 select/deselect 全部按钮。到目前为止，我试图让这个只用两个 tables 工作。当我单击按钮时，它会将按钮值从 Select All 更改为 Deselect All 等等，但是当我在第一组 table 并单击按钮时，这些组没有任何反应。计划记录全部被选中。知道我做错了什么吗？

<script>

var checkflag = "false";

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

var checkflag2 = "false";

function checkGroups() {
  var inputs2 = document.getElementsByClassName( 'schedule' );
  if (checkflag2 == "false")
   {
  for (var i = 0; i < inputs2.length; i++) {
      inputs2.checked = true;
    }
    checkflag2 = "true";
    return "Deselect All";
    }
else {
  for (var i = 0; i < inputs2.length; i++)
  {
  inputs2.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
    } );
    $("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(this.form)" style="float:left;">');
} );


$(document).ready(function() {
    $('#schedule-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("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(this.form)" style="float:left;">');
} );


</script>

Answer 1

您共享的代码存在一些问题。

问题

缺少 checkScheds 方法。您已将这两种方法命名为 checkGroups
当您第二次调用 $("div.toolbar").html 时，它实际上将页面中的所有 div 元素替换为 class toolbar
您更需要将第一次点击处理程序附加到请求列表中的第一个工具栏，将第二次点击处理程序附加到计划列表中的第二个工具栏
当您调用 DataTable 时，它实际上添加了包装 div，例如 request-list_wrapper 和 schedule-list_wrapper
所以当你调用.html方法时你必须实际使用选择器#request-list_wrapper div.toolbar
此外，在 for 循环内的 checkGroups 和 checkScheds 方法中，您必须设置 inputs[i].checked 才能访问各个复选框，而不是 inputs.checked

工作解决方案 1

您可以查看以下运行良好的代码片段。

var checkflag = false;

function checkGroups() {

  var inputs = document.getElementsByClassName( 'group' );
  
  checkflag = checkflag === false ? true : false;
  
  for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = checkflag;
    }
    
  return checkflag === true ? "Deselect All" : "Select All";
}

var checkflag2 = false;

function checkScheds() {
  
  var inputs = document.getElementsByClassName( 'schedule' );
  
  checkflag2 = checkflag2 === false ? true : false;
  
  for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = checkflag2;
    }
    
  return checkflag2 === true ? "Deselect All" : "Select All";
}

$(document).ready(function() {
    $('#request-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("#request-list_wrapper 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(this.form)" style="float:left;">');
} );


$(document).ready(function() {
    $('#schedule-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("#schedule-list_wrapper 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(this.form)" style="float:left;">');
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></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>

工作解决方案 2

另一个版本的解决方案是 this。

问题 select 和 deselect 复选框范围

Problem select and deselecting ranges of checkboxes

javascript

datatables