javascript - 用于选择表中所有行的复选框

Question

我的 table 里面有一张 table 。基本结构如下

<input type="checkbox" name="CheckAll" id="CheckAll"/> <b>Click to select all Option Values</b>
<table class="Parent">
  <tr>
     <td><input type="checkbox" id="Parent">Parent1</td>
     <td><table class="Children">
        <tr><td><input type="checkbox" id="Child">Child1</td></tr>  
        <tr><td><input type="checkbox" id="Child">Child2</td></tr>
        <tr><td><input type="checkbox" id="Child">Child3</td></tr>
     <td>
  </tr>
  <tr>
     <td><input type="checkbox" id="Parent">Parent2</td>
     <td><table class="Children">
        <tr><td><input type="checkbox" id="Child">Child1</td></tr>  
        <tr><td><input type="checkbox" id="Child">Child2</td></tr>
     <td>
  </tr>

当我单击“全部选中”(表格上方的复选框)时，我希望选中或取消选中所有复选框。我用以下方法做了

    $(document).ready(function () {
        $("#CheckAll").change(function () {
            $("input:checkbox").prop('checked', $(this).prop("checked"));
        });
    });

现在，当选择其中一个父级时，我尝试选择所有子级。假设我无权访问 View 中的父 ID。如何仅访问与正在更改的复选框相邻的表格？

Answer 1

您可以通过定位下一个 TD，然后它包含的表来实现这一点。
请注意，您必须将 #Parent、#Child 等更改为类，因为您不能有重复的 ID。

$('.Parent[type=checkbox]').on('change', function() {
    $(this).closest('td')
           .next('td')
           .find('table input[type=checkbox]')
           .prop('checked', this.checked);
});