Question

我有一个与SO上类似的其他问题的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结构下半部分中的父/子关系不适用于某些未关闭的标签。但是前几个父母/孩子正在工作

Answer 1

以下示例可帮助您了解并为您提供实现目标的方法。

<强>解释

你应该做的是给每个子类别一个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;
}

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

直播示例

阅读材料

选中所有子复选框时如何检查父项

1 个答案: