javascript - 当取消选中所有 child 的父复选框时，也应该使用 jquery 取消选中

Question

我有嵌套的复选框列表项。在我的例子中，如果我选择 parent ，所有 child 的复选框都被选中。

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

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

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

$(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

你只是忘记了一个 Angular 落的案例

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>