有没有办法在数据表中添加一个“全选”复选框，以检查下表行中的所有复选框答案

【问题标题】：Is there a way to add a "select all" check box in a dataTable that checks all the checkboxs in the following table rows有没有办法在数据表中添加一个“全选”复选框，以检查下表行中的所有复选框
【发布时间】：2020-04-26 15:17:58
【问题描述】：

我的页面上有多个动态表，每一行都有一个复选框，我正在分配一个从 sql 查询中获取的值。在下面附上截图：-

An example at two dynamic tables

有时可能超过 5-10 张桌子。

这是我的表结构的把手代码

<div id="collapse_{{major_location_id}}" class="collapse show" aria-labelledby="heading data-parent="#accordion">
                             <div class="card-body">
                                <div class="common_table table-responsive search-input tablecolumnLimit">
                                   <table class="table  locations-table">
                                      <thead>
                                         <tr>
                                            <th>
                                               <label class="custom_checkbox">
                                                  <input class="chk_all" type="checkbox">
                                                  <span class="checkmark"></span>
                                               </label>Location Name
                                            </th>
                                            <th>Address</th>
                                            <th>City</th>
                                            <th>Zipcode</th>
                                         </tr>
                                      </thead>
                                      <tbody>
                                         {{#each locations}}

                                         <tr>
                                            <td>
                                               <label class="custom_checkbox">
                                                  {{#if (eq type 'participant')}}
                                                  <input type="checkbox" class="chk_cls"
                                                     name="participant_locations[]" value="{{location_id}}">
                                                  {{else}}
                                                  <input type="checkbox" class="chk_cls"
                                                     name="non_participant_locations[]" value="{{location_id}}">
                                                  {{/if}}
                                                  <span class="checkmark"></span>
                                               </label>{{location_name}}</td>
                                            <td>{{this.address1}}</td>
                                            <td>{{this.donor_city}}</td>
                                            <td>{{this.zip}}</td>
                                         </tr>
                                         {{/each}}
                                      </tbody>
                                   </table>
                                </div>
                             </div>
                          </div>

这是我的数据表脚本。

 $(document).ready(function () {
     //          var rowCount = $('#myTable tr').length;

     var table = $('.locations-table').dataTable();

     $(".chk_all").on('click', function () {
        /* I want to check all the checkboxes that exists in the table which **this** button 
           belongs to. Keeping in mind the hidden checkboxes due to pagination.
     });

)};

以下代码仅适用于单个表：

$("#chk_all").on('click', function () {
    var cells = table.api().cells().nodes();
    $(cells).find('.chk_cls').prop('checked', this.checked);
});

【问题讨论】：

标签： jquery node.js datatable datatables

【解决方案1】：

在 Andrew 给出的建议中修改后对我有用。我使用 $(this) 找到离我的 Check All 复选框最近的表，然后使用变量获取所有单元格。

$(".chk_all").on('click', function () {
     var myTable = $(this).closest(table);
     var cells = $(myTable).dataTable().api().cells().nodes();
     $(cells).find('.chk_cls').prop('checked', this.checked);
});

【讨论】：

【解决方案2】：

您可以使用已在使用的 DataTables API，但只需提供不同的选择器 - 例如：

var cells = $('.dataTable').dataTable().api().cells().nodes();

这会找到所有使用类 dataTable 的表。从那里，您可以使用现有逻辑的其余部分。

【讨论】：