时间戳

首页 > 解决方案 > 有没有办法在数据表中添加一个“全选”复选框来检查下表行中的所有复选框

jquery - 有没有办法在数据表中添加一个“全选”复选框来检查下表行中的所有复选框

问题描述

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

两个动态表的示例

有时可以有超过 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);
});

标签： jquerynode.jsdatatabledatatables

解决方案

在 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);
});

推荐阅读