javascript - 当所有子复选框都被选中时如何检查父级

Question

我的 HTML 结构与其他类似的问题有很大不同。我想在选中所有子复选框时选中父复选框。我有一个JSFiddle我在其中添加了相当长的 HTML 代码。我在 Jquery 中做错了什么？这是我的 jquery:

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

PS:由于一些未封闭的标签，HTML 结构下半部分的父/子关系不能很好地工作。但前几个家长/ child 正在工作

Answer 1

下面的示例应该可以帮助您理解并为您提供一种实现您想要的目标的方法。

说明

您应该做的是为每个子类别提供一个 ID，该 ID 可用于遍历子类别，以便只能选中这些复选框，而不是全部。

HTML

<ul>
  <li>
    <input type="checkbox" id="test-main"> test
  </li>
  <ul id="test-sub-items">
    <li>
      <input type="checkbox"> test
    </li>
    <li>
      <input type="checkbox"> Something
    </li>
    <li>
      <input type="checkbox"> Another Thing</li>
  </ul>

  <li>
    <input type="checkbox"> Blah
  </li>
  <li>
    <input type="checkbox"> blah
  </li>
</ul>

JavaScript

var parent = document.getElementById('test-sub-items'),
  parentCheckbox = document.getElementById('test-main');

parentCheckbox.addEventListener('click', function () {
  for (var i = 0; i < parent.children.length; i++) {
    if (parentCheckbox.checked == true)
      parent.children[i].firstElementChild.checked = true;
    else
      parent.children[i].firstElementChild.checked = false;

  }
});

这只是一个示例，您可以尝试将其合并到您的代码中。

更新

读完你的评论后，我很快想出了这个应该有帮助的功能:

function areAllChecked() 
{
  for (var i = 0; i < parent.children.length; i++) {
    if (parentCheckbox.checked == false)
      return false;
  }
  return true;
}

检查实时示例中的控制台是否有更新的版本。

实例

JSFiddle

JSFiddle (Update 1)

阅读 Material

children

firstElementChild