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

Question

我有嵌套的复选框列表项。在我的情况下，如果我选择父，则所有子复选框都选中了。

如果我取消选中父子复选框，取消选中该复选框，并选中所有子复选框，则选中父复选框正常。

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

我是jQuery和javascript.where的新手来改变我的代码。感谢任何帮助。谢谢你。

＆＃13;

＆＃13;

$(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)'));
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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并对每个父母进行检查。

对于关闭，您只需找到兄弟ul并在其中找到所有:checkbox s。

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

如果不清楚，请告诉我。

＆＃13;

＆＃13;

$(':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);
  });
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;