jquery - 点击表格行触发其下有tr行的checkbox事件

Question

我有一个可行的解决方案，但我想改进它。单击 tr 行时，会切换相邻的复选框。但在此表中，如果用户单击其下方带有“子数据”的行，那么它也会切换其上方的复选框。

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    //alert('function runs twice');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

http://jsfiddle.net/8vb374az/

Answer 1

要实现此目的，您可以在子级别 tr 元素上放置一个类，该类在上一个 tr 上引发单击事件，如下所示:

$(document).ready(function() {
  $('.record_table tr').click(function(e) {
    if (e.target.type !== 'checkbox') {
      $(':checkbox', this).prop('checked', function(i, c) { return !c; });
    }
  });
  
  $('.record_table tr.sub').click(function(e) {
    $(this).prev('tr').click();
  });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="sub">
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="sub">
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="sub">
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>