Question

我正在使用Datatables jQuery插件增强标准的html表。我所拥有的是一份发票清单，这些发票按照这个特定行业中所谓的“工作”进行分组。因此，我在“分组”表行上有一个作业描述，并在后续表行中有该作业中各个发票的列表，直到我们点击与不同作业对应的下一个“分组”表行。在每个表行的最后一个表格单元格中，我有一个复选框。请参阅下面的图片以获取基本示例（抱歉，必须为客户清理）。

Table Row Checkboxes

当用户选中复选框“＃1”（见图）时，我希望通过“＃6”检查后续复选框。因此，实际上，我希望每个“分组”行中的复选框仅检查属于其相应组的复选框。

HTML代码（已清理和简化）

<!--Grouping Row 1-->
<tr id="group-id-example_insertjobname">
<td colspan="11" data-group="-b-insertjobname" data-group-level="0">
<input type="checkbox" class="check" name="" value="">
</td>
</tr>
<!--Grouping Row 1-->

<tr role="row" class="odd group-item" data-group="-b-XXX">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="pay">
<input type="checkbox" name="PI0" class="Invoice Open" value="">
</td>
</tr>

<tr role="row" class="odd group-item" data-group="-b-XXX">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="pay">
<input type="checkbox" name="PI1" class="Invoice Open" value="">
</td>
</tr>

<tr role="row" class="odd group-item" data-group="-b-XXX">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="pay">
<input type="checkbox" name="PI2" class="Invoice Open" value="">
</td>
</tr>

<!--Grouping Row 2-->
<tr id="group-id-example_insertjobname">
<td colspan="11" data-group="-b-insertjobname" data-group-level="0">
<input type="checkbox" class="check" name="" value="">
</td>
</tr>
<!--Grouping Row 2-->

jQuery功能

 $(function() {
     var ischecked = false;
     $('[id^="checkall"]').click(function(e) {
         e.stopPropagation();   
         e.preventDefault();
         if (ischecked === false) {
             $(".pay input:checkbox").prop("checked", true);
                 ischecked = true;
         } else {
             $(".pay input:checkbox").prop("checked", false);
             ischecked = false;
         }
     });
});

我知道为什么这不起作用。我在单击分组复选框时将.pay选择器作为目标，并且该选择器对于所有分组级别下的所有表格单元格都是通用的。我只是不知道从哪里开始。我查看了nextUntil（），但不确定如何实现它。谢谢你的帮助！

Answer 1

最简单的，我建议：

// bind the change event-handler to checkboxes with the class 'change':
$('input[type="checkbox"].check').on('change', function() {
  // cache the changed checkbox:
  var check = this;
  // find the closest 'tr' element:
  $(check).closest('tr')
  // find the all the subsequent 'tr' elements until we find a 'tr' with an id:
  .nextUntil('tr[id]')
  // find the checkboxes inside of those 'tr' elements:
  .find('input[type="checkbox"]')
  // set the checked property equal to state of the changed checkbox:
  .prop('checked', check.checked);
});

$('input[type="checkbox"].check').on('change', function() {
  var check = this;
  $(check).closest('tr').nextUntil('tr[id]').find('input[type="checkbox"]').prop('checked', check.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="group-id-example_insertjobname">
      <td colspan="11" data-group="-b-insertjobname" data-group-level="0">
        <input type="checkbox" class="check" name="" value="">
      </td>
    </tr>
    <!--Grouping Row 1-->

    <tr role="row" class="odd group-item" data-group="-b-XXX">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="pay">
        <input type="checkbox" name="PI0" class="Invoice Open" value="">
      </td>
    </tr>

    <tr role="row" class="odd group-item" data-group="-b-XXX">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="pay">
        <input type="checkbox" name="PI1" class="Invoice Open" value="">
      </td>
    </tr>

    <tr role="row" class="odd group-item" data-group="-b-XXX">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="pay">
        <input type="checkbox" name="PI2" class="Invoice Open" value="">
      </td>
    </tr>

    <!--Grouping Row 2-->
    <tr id="group-id-example_insertjobname">
      <td colspan="11" data-group="-b-insertjobname" data-group-level="0">
        <input type="checkbox" class="check" name="" value="">
      </td>
    </tr>
    <!--Grouping Row 2-->
  </tbody>
</table>

参考文献：

Answer 2

如果我理解正确，每组分组行都有相同的数据属性。如果是这种情况，那么您只需要将组从父行中取出并按如下方式设置它们：

$(function() {
    $('[id^="checkall"]').click(function(e) {
        e.stopPropagation();   
        e.preventDefault();
        var thisGroup = $(this).closest('tr').data('group');
        var groupCheckboxes = $('tr[data-group="' + thisGroup + '"]').find('input:checkbox');
        groupCheckboxes.prop('checked', $(this).prop('checked'));
    });
});

仅检查分组表行中的复选框

2 个答案: