Question

如果我检查父节点，则选中所有子节点，但仅选中父节点时，我只想选中没有子子节点的子复选框。

我在下面创建了jsfiddle，如果我们检查A1，则仅应检查a2。其他所有操作都应该相同。

$('li :checkbox').on('click', function() {
  var $chk = $(this),
    $li = $chk.closest('li'),
    $ul, $parent;
  if ($li.has('ul')) {
    $li.find(':checkbox').not(this).prop('checked', this.checked)
  }
  do {

    $ul = $li.parent();
    $parent = $ul.siblings(':checkbox');
    if ($chk.is(':checked')) {
      $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
    } else {
      $parent.prop('checked', false)
    }
    if ($ul.get(0))
      if ($ul.find(':checkbox:checked').length !== 0)
        $parent.prop('checked', true)
    $chk = $parent;
    $li = $chk.closest('li');

  } while ($ul.is(':not(.someclass)'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="1" class="tab-pane fade in active">
  <li class='chkbox'>
    <input type='checkbox' class='myCheckbox' name='names[]' value='5'>A1
    <ul>
      <li class='chkbox'>
        <input type='checkbox' class='myCheckbox' name='names[]' value='26'>a2
        <li class='chkbox'>
          <input type='checkbox' class='myCheckbox' name='names[]' value='25'>a1
          <ul>
            <li class='chkbox'>
              <input type='checkbox' class='myCheckbox' name='names[]' value='27'>aaaaaa
              <li class='chkbox'>
                <input type='checkbox' class='myCheckbox' name='names[]' value='28'>abbbbbb
          </ul>
    </ul>
    <div style="clear:both">
    </div>
</div>

JsFiddle

Answer 1

您只需要获取$li的直接后代，而不是$li.find(':checkbox')即可返回所有后代。然后，您可以过滤没有ul兄弟姐妹的兄弟姐妹。

例如

$li.find('> ul > li > :checkbox').filter(function(){
  return $(this).siblings('ul').length === 0;
}).prop('checked', this.checked);

关闭li标签也是个好主意。很难理解您的HTML结构。

选中父复选框时，仅检查直子而不带子子

1 个答案: