如果选中子复选框，则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>