如何检查数据表中的所有复选框答案

【问题标题】：How to check all checkboxes in datatable如何检查数据表中的所有复选框
【发布时间】：2018-04-10 04:42:14
【问题描述】：

我正在使用数据表来创建一个可排序、可搜索和分页的表，表中的行是加载服务器端的，我为每一行添加一个复选框，并在表头中选中所有复选框，我编写了一个自定义 jquery检查复选框所有行的功能，这是我的代码：

// checkbox check all
  $(".checkboxParent").change(function () {
    var chkGroup = $(this).data("chk-group");
    if (chkGroup !== null) {
      $(".checkboxItem[data-chk-group='"+chkGroup+"']").prop('checked', $(this).prop("checked"));
    }
    else {
      $(".checkboxItem").prop('checked', $(this).prop("checked"));
    }
  });

因为我可能在一页中有多个表，所以需要选中所有复选框，所以我在复选框中包含一个 data-chk-group 字段来标识复选框要检查的组。

问题是我的自定义检查所有功能无法检查数据表插件中行的第二页，有什么方法可以解决这个问题吗？？

这是我的 HTML 代码：

<table class="paginateTable table table-hover display  pb-30">
                <thead>
                  <tr>
                    <th class="noSort fit">
                      <div class="checkbox checkbox-primary">
                        {!! Form::checkbox('userId', null, null, ['class' => 'checkboxParent', "data-chk-group" => ""]) !!}
                        <label></label>
                      </div>
                    </th>
                    <th>Level</th>
                    <th>Name</th>
                    <th>Members</th>
                    <th>Gift Point</th>
                    <th>Wallet</th>
                    <th>Withdrawal Wallet</th>
                  </tr>
                </thead>
                <tbody>
                  @for ($i=0; $i < 100; $i++)
                    <tr>
                      <td>
                        <div class="checkbox checkbox-primary">
                          {!! Form::checkbox('userId', null, null, ['class' => 'checkboxItem', "data-chk-group" => ""]) !!}
                          <label></label>
                        </div>
                      </td>
                      <td>
                        @php
                          $userLevel = $levels[rand(0, 3)];
                        @endphp
                        <div style="display:none;">
                          {{$userLevel}}
                        </div>
                        <div class="tableImage">
                          <img src="{{asset($userLevel)}}" alt="">
                        </div>
                      </td>
                      <td>
                        <span>
                          <span class="fontWeight800 colorBlack">Fullname {{$i}}</span>
                          <br>
                          <span>Username {{$i}}</span>
                        </span>
                      </td>
                      <td>{{$i}}</td>
                      <td>{{$i * 5}} aP</td>
                      <td>{{(($i+1) * 10) - rand(1, 5)}} aP</td>
                      <td>{{(($i+1) * 10) - rand(1, 5)}} aP</td>
                    </tr>
                  @endfor
                </tbody>
              </table>

【问题讨论】：

标签： jquery checkbox datatable

【解决方案1】：

这是我的代码的 sn-p，它已经检查了我的数据表中的所有复选框：

var oTable = $('#yourTable').dataTable({
  stateSave: true,
  "bDestroy": true
});

$('#yourButton').click(function() {
  // get all cells from your table
  var allPages = oTable.api().cells().nodes(); 

  //find your input checkbox in the cell, then make it checked
  $(allPages).find('input[type="checkbox"]').prop('checked', true); 
});

如果你想只检查过滤的复选框，你可以像这样为该代码添加一些香料：

    $('#selectAllBTN').click(function () {
        var length = oTable.api().rows({filter : 'applied'}).nodes().length;
        var allPages = oTable.api().rows( { filter : 'applied'} ).nodes();
        for(var i=0;i<length;i++){
         
  $(allPages[i]).find('input[type="checkbox"]').prop('checked',true);
        }
       
    })

【讨论】：