当取消选中所有孩子的父复选框时，也应该使用 jquery 取消选中

Question

我有嵌套的复选框列表项。在我的情况下，如果我选择父母，所有孩子的复选框都检查得很好。

如果我取消选中父子复选框，则取消选中正常并且所有子复选框都选中父复选框检查正常。

但我的问题是，如果我取消选中所有子复选框，父复选框仍处于选中状态。

我是 jQuery 和 javascript.where 来更改我的代码的新手。任何帮助将不胜感激。在此先感谢。

$(function() {
  $('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', 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
        <ul>
          <li class='chkbox' ;>
            <input type='checkbox' class='myCheckbox' name='names[]' value='29'>a3
            <li class='chkbox' ;>
              <input type='checkbox' class='myCheckbox' name='names[]' value='30'>a4
        </ul>
        <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>
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='6'>A2
      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='7'>A3
        <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='8'>A4
          <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='9'>A5
            <div style="clear:both">
            </div>
</div>
<div id="2" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='10'> B1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='11'>B2
      <div style="clear:both">
      </div>
</div>
<div id="3" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='12'>C1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='13'>C2
      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='14'>C3
        <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='17'>A6
          <ul>
            <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='19'>A8
              <ul>
                <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='21'>A10
                  <ul>
                    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='23'>A13
                      <ul>
                        <li class='chkbox' ;><input type='checkbox' name='names[]' value='31'>jjj
                          <li class='chkbox' ;><input type='checkbox' name='names[]' value='32'>kkk
                      </ul>
                      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='24'>A14
                        <ul>
                        </ul>
                  </ul>
                  <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='22'>A11
              </ul>
              <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='20'>A9
          </ul>
          <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='18'>A7
            <div style="clear:both"></div>
</div>
<div id="4" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='15'>D1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='16'>D2
      <div style="clear:both"></div>

Answer 1

你只是忘记了下面的一个角盒

if($ul.get(0)) if($ul.find(':checkbox:checked').length !== 0) $parent.prop('checked', true)

$(function() {
  $('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
        <ul>
          <li class='chkbox' ;>
            <input type='checkbox' class='myCheckbox' name='names[]' value='29'>a3
            <li class='chkbox' ;>
              <input type='checkbox' class='myCheckbox' name='names[]' value='30'>a4
        </ul>
        <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>
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='6'>A2
      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='7'>A3
        <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='8'>A4
          <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='9'>A5
            <div style="clear:both">
            </div>
</div>
<div id="2" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='10'> B1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='11'>B2
      <div style="clear:both">
      </div>
</div>
<div id="3" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='12'>C1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='13'>C2
      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='14'>C3
        <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='17'>A6
          <ul>
            <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='19'>A8
              <ul>
                <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='21'>A10
                  <ul>
                    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='23'>A13
                      <ul>
                        <li class='chkbox' ;><input type='checkbox' name='names[]' value='31'>jjj
                          <li class='chkbox' ;><input type='checkbox' name='names[]' value='32'>kkk
                      </ul>
                      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='24'>A14
                        <ul>
                        </ul>
                  </ul>
                  <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='22'>A11
              </ul>
              <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='20'>A9
          </ul>
          <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='18'>A7
            <div style="clear:both"></div>
</div>
<div id="4" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='15'>D1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='16'>D2
      <div style="clear:both"></div>

Answer 2

如果我理解正确，您需要在 2 个方向上运行 - 向上和向下（在层次结构树中）。

对于 up，您可以使用 parents 并为每个父母进行检查。

对于down，你只需要找到兄弟ul并在其中找到所有:checkboxs。

此外，我将事件从 click 更改为 change - 该事件旨在处理复选框状态的更改。

如果有什么不清楚的地方请告诉我。

$(':checkbox').on('change', function() {
  var $this = $(this),
      checked = $this.is(':checked');
      
  toggleParents($this, checked);
  //toggleChildren($this, checked);
});

function toggleParents(checkbox, checked) {
  checkbox.parents('li').each(function() {
    var $parent = $(this);
    $parent.children(':checkbox').prop('checked', checked);
  });
}

function toggleChildren(checkbox, checked) {
  checkbox.siblings('ul').find(':checkbox').each(function() {
    $(this).prop('checked', checked);
  });
}

<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
        <ul>
          <li class='chkbox' ;>
            <input type='checkbox' class='myCheckbox' name='names[]' value='29'>a3
            <li class='chkbox' ;>
              <input type='checkbox' class='myCheckbox' name='names[]' value='30'>a4
        </ul>
        <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>
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='6'>A2
      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='7'>A3
        <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='8'>A4
          <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='9'>A5
            <div style="clear:both">
            </div>
</div>
<div id="2" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='10'> B1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='11'>B2
      <div style="clear:both">
      </div>
</div>
<div id="3" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='12'>C1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='13'>C2
      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='14'>C3
        <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='17'>A6
          <ul>
            <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='19'>A8
              <ul>
                <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='21'>A10
                  <ul>
                    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='23'>A13
                      <ul>
                        <li class='chkbox' ;><input type='checkbox' name='names[]' value='31'>jjj
                          <li class='chkbox' ;><input type='checkbox' name='names[]' value='32'>kkk
                      </ul>
                      <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='24'>A14
                        <ul>
                        </ul>
                  </ul>
                  <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='22'>A11
              </ul>
              <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='20'>A9
          </ul>
          <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='18'>A7
            <div style="clear:both"></div>
</div>
<div id="4" class="tab-pane fade">
  <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='15'>D1
    <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='16'>D2
      <div style="clear:both"></div>