如果选中子复选框，则jQuery检查父复选框

Question

我想制定一个逻辑，如果选中子复选框，它也会检查父复选框。输入可以是父级、子级和两者：

<input type="checkbox" name="checkbox[$counter]" class="parent" />
<input type="checkbox" name="checkbox[$counter]" class="child" />
<input type="checkbox" name="checkbox[$counter]" class="parent child" />

这个结构：

• 1
  • 2
  • 3
• 4
  • 5
    • 6
    • 7

会是这样的：

<table class="table">
  <tr>
    <td>
      <input type="checkbox" name="checkbox[1]" class="parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[2]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[3]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[4]" class="parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[5]" class="child parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[6]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[7]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
</table>

如果我检查 3，它会检查 1，如果我检查 6，它也会检查 5 和 4。

复选框也位于单独的表格行中，因为我想在复选框旁边的表格中显示一些结构化的信息。

你能告诉我一个脚本是做什么的吗？我试过了，但它不起作用：

$(document).ready(function() {
    $('input.child').change(function() {
        if ($(this).is(':checked')) {
            $(this).closest('input.parent:checkbox').attr('checked', true);
        }
    });
});

Answer 1

复选框不是父子关系，因此 .closest() 方法将不起作用，因为它从自身开始遍历。

我建议您使用 TR 元素分配类，并为它们附加事件处理程序，遍历 DOM 将很容易。

<tr class="parent">...</tr>
<tr class="child">...</tr>

您可以使用.prevAll() 和.first() 的组合来获得目标TR，然后使用.find() 获得复选框。

另外，如果要触发更改事件，可以使用trigger()方法。

$(document).ready(function() {
  $('.child').on('change', ':checkbox', function() {
    if ($(this).is(':checked')) {
      var currentRow = $(this).closest('tr');
      var targetedRow = currentRow.prevAll('.parent').first();
      var targetedCheckbox = targetedRow.find(':checkbox');
      targetedCheckbox.prop('checked', true).trigger('change');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table">
  <tr class="parent">
    <td>
      <input type="checkbox" name="checkbox[1]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[2]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[3]" />
    </td>
  </tr>
  <tr class="parent">
    <td>
      <input type="checkbox" name="checkbox[4]" />
    </td>
  </tr>
  <tr class="child parent">
    <td>
      <input type="checkbox" name="checkbox[5]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[6]" />
    </td>
  </tr>
  <tr class="child">
    <td>
      <input type="checkbox" name="checkbox[7]" />
    </td>
  </tr>
</table>

Answer 2

试试下面的脚本，

$(document).on('change', 'input[type=checkbox]', function(e) {
  $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  $(this).parentsUntil('input[type=checkbox]').children("input[type='checkbox']").prop('checked', this.checked);
  e.stopPropagation();
});

Answer 3

使用您当前的html 结构，您需要在childs 和parents 之间建立链接，例如使用data 属性，现在它适用于任何html 结构、table、ul li 或没有这些。

$(document).ready(function() {
  $('input.child').on('change', function() {
    var data = $(this).data('name');

    if (this.checked) {
      $('input.parent:checkbox[data-name="' + data + '"]').prop('checked', true);
      $('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', true);
    } else {
      $('input.parent:checkbox[data-name="' + data + '"]').prop('checked', false);
      $('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', false);
    }
  });
});

/* Optional, This is what I added for better look */

$('.child').each(function() {
  $(this).parent().css({
    paddingLeft: 20,
    backgroundColor: '#c0c0c0'
  });
});

$('.parent').each(function() {
  $(this).parent().css({
    backgroundColor: 'black'
  });
});

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <input type="checkbox" name="checkbox[1]" class="parent" data-name="chck-1" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[2]" class="child" data-name="chck-1" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[3]" class="child" data-name="chck-1" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[4]" class="parent" data-name="chck-2" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[5]" class="child parent" data-name="chck-2" data-parent="chck-3" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[6]" class="child" data-name="chck-3" />
    </td>
    <td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[7]" class="child" data-name="chck-3" />
    </td>
    <td>
  </tr>
</table>