使用Jquery选择父表的行后选择子表的行

Question

我是jquery的新手，它一步一步地学习事物。

我有一些主表和那些主表中的嵌套表。父表和子表的每一行都有一个复选框。现在，在选中父表的复选框之后，应该选中子表/嵌套表的每一行的复选框。

我已经使用以下代码注册了该事件：

$(function () {
    $("input[type='checkbox']").change(function () {
    $(this).siblings('tr')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);


    });
});

但是上面的代码无法正常工作。我无法正确遍历子表。

出于说明目的，我创建了一个带有一个父表和一个子表的小提琴。

$(function() {
  $("input[type='checkbox']").change(function() {

    $(this).siblings('tr')
      .find("input[type='checkbox']")
      .prop('checked', this.checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="divSAcheckBox" style="display: inline; left: 37px; position: relative;"><input id="SAcheckBox" name="SAcheckBox" type="checkbox" /> Select All</div>
<table id="parentTable" class="display dataTable no-footer" style="position: relative; top: 0px; width: 911px; table-layout: fixed;" role="grid">
  <thead>
    <tr style="height: 0px;" role="row">
      <th class="sorting_disabled" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">&nbsp;</th>
      <th id="chkbox" class="sorting_disabled" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Select
        <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Select</div>
      </th>
      <th id="media" class="sorting" style="border-left: 1px dashed #111111; text-align: left; width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Media
        <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Media</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd shown" role="row" align="left">
      <td class="sorting_1"><input style="cursor: pointer;" type="checkbox" align="center" /></td>
      <td class="details-control" style="width: 51px;">&nbsp;</td>
      <td style="width: 51px;">Phone</td>
      <td style="width: 90px;" colspan="9">
        <table id="issuetable_12_13_2018_13_23_34" class="stripe nowrap" style="position: relative; margin: 5px 0 0 30px; cellspacing=0; border-collapse: collapse; align-text: left; top: 0px; width: 95%;">
          <thead>
            <tr>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th style="border: 1px solid #333333; text-align: left; width: 333px;" nowrap="nowrap" bgcolor="#FAF6F2">Select</th>
              <th style="border: 1px solid #333333; text-align: left; width: 407px;" nowrap="nowrap" bgcolor="#FAF6F2">Priority</th>
            </tr>
          </thead>
          <tbody>
            <tr align="left">
              <td style="width: 333px;" nowrap="nowrap"><input style="cursor: pointer;" type="checkbox" align="center" />&nbsp;</td>
              <td style="width: 407px;" nowrap="nowrap">999</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JSfddle

非常感谢您的帮助。

Answer 1

当前元素为复选框，因此它不能具有TR，因为兄弟姐妹使用.closest()向上遍历父TR元素，然后执行所需的DOM遍历方法，即.siblings() ，.find()以定位所需的元素

$(this).closest('tr').find(...)
$(this).closest('tr').siblings('tr').find(...)

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="divSAcheckBox" style="display: inline; left: 37px; position: relative;"><input id="SAcheckBox" name="SAcheckBox" type="checkbox" /> Select All</div>
<table id="parentTable" class="display dataTable no-footer" style="position: relative; top: 0px; width: 911px; table-layout: fixed;" role="grid">
  <thead>
    <tr style="height: 0px;" role="row">
      <th class="sorting_disabled" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">&nbsp;</th>
      <th id="chkbox" class="sorting_disabled" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Select
        <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Select</div>
      </th>
      <th id="media" class="sorting" style="border-left: 1px dashed #111111; text-align: left; width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Media
        <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Media</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd shown" role="row" align="left">
      <td class="sorting_1"><input style="cursor: pointer;" type="checkbox" align="center" /></td>
      <td class="details-control" style="width: 51px;">&nbsp;</td>
      <td style="width: 51px;">Phone</td>
      <td style="width: 90px;" colspan="9">
        <table id="issuetable_12_13_2018_13_23_34" class="stripe nowrap" style="position: relative; margin: 5px 0 0 30px; cellspacing=0; border-collapse: collapse; align-text: left; top: 0px; width: 95%;">
          <thead>
            <tr>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th>&nbsp;</th>
            </tr>
            <tr>
              <th style="border: 1px solid #333333; text-align: left; width: 333px;" nowrap="nowrap" bgcolor="#FAF6F2">Select</th>
              <th style="border: 1px solid #333333; text-align: left; width: 407px;" nowrap="nowrap" bgcolor="#FAF6F2">Priority</th>
            </tr>
          </thead>
          <tbody>
            <tr align="left">
              <td style="width: 333px;" nowrap="nowrap"><input style="cursor: pointer;" type="checkbox" align="center" />&nbsp;</td>
              <td style="width: 407px;" nowrap="nowrap">999</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>