Question

我已经在here

上设置了不确定复选框

但我正在寻找多个不确定的复选框like here

<div class="container">
  <ul>
    <li>
      <input type="checkbox" class="option"><label for="option"> Electronics1</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> Laptops</label></li>
        <li><label><input type="checkbox" class="subOption"> TVs</label></li>
        <li><label><input type="checkbox" class="subOption"> Microphones</label></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" class="option"><label for="option"> Electronics2</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> Laptops</label></li>
        <li><label><input type="checkbox" class="subOption"> TVs</label></li>
        <li><label><input type="checkbox" class="subOption"> Microphones</label></li>
      </ul>
    </li>
  </ul>
</div>

.JavaScript：

var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementsByClassName('option');

for(j=0;j<checkall.length;j++) {
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll('input.subOption:checked').length;
    checkall[j].checked = checkedCount > 0;
    checkall[j].indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  }
 }
}

请帮助我了解处理多个节点的更好方法。

Answer 1

代码中的多个问题

执行onclick时会评估i和j的值，因此它们的最后一个值仅绑定到事件处理程序
您只检查所有复选框的计数，而不仅仅是那些特定于一个选项

试试这个

var checkboxes = document.querySelectorAll('input.subOption');

checkboxes.forEach(function( checkbox ) {
  checkbox.addEventListener("click", function(event) {
    var parentLi = this.parentNode.parentNode.parentNode.parentNode;
    var parentCheckAll = parentLi.querySelector(".option");
    var checkedCount = parentLi.querySelectorAll('input.subOption:checked').length;
    var totalCount = parentLi.querySelectorAll('input.subOption').length;
    console.log(checkedCount, totalCount);
    checkedCount < totalCount && checkedCount > 0 ? (parentCheckAll.indeterminate = true) : (parentCheckAll.indeterminate = false, parentCheckAll.checked = checkedCount > 0 );
  })
})

<div class="container">
  <ul>
    <li>
      <input type="checkbox" class="option">
      <label for="option"> Electronics1</label>
      <ul>
        <li>
          <label>
            <input type="checkbox" class="subOption"> Laptops</label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subOption"> TVs</label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subOption"> Microphones</label>
        </li>
      </ul>
    </li>
    <li>
      <input type="checkbox" class="option">
      <label for="option"> Electronics2</label>
      <ul>
        <li>
          <label>
            <input type="checkbox" class="subOption"> Laptops</label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subOption"> TVs</label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subOption"> Microphones</label>
        </li>
      </ul>
    </li>
  </ul>
</div>

多个不确定复选框无法正常工作

1 个答案: