纯javascript过滤器框，带有li元素的复选框

Question

<p>
    <input type="checkbox" id="all"/>
    <label for="all">Select all</label>
</p>
<ul id="li-list">
    <li><input type="checkbox" id="one"/><label for="all">value 1</label></li>
    <li><input type="checkbox" id="two"/><label for="all">value 2</label></li>
    <li><input type="checkbox" id="three"/><label for="all">value 3</label></li>
    <li><input type="checkbox" id="four"/><label for="all">value 4</label></li>
</ul>

我希望上面的代码像 -

一样工作

1. 如果我选中，则应选中所有复选框
2. 如果我选中所有复选框，则选中全部应选中。但如果我取消选中其中一个复选框，则选择all也应该取消选中

Answer 1

这不是世界上最漂亮的代码，但它有效！

      const mainCheckbox = document.getElementById("all")
      const allCheckboxes = document.getElementsByClassName("maincheck")

      mainCheckbox.addEventListener("change", (e) => {
        if (e.currentTarget.checked) {
          checkAll()
        } else {
          uncheckAll()
        }
      })

      for (let i = 0; i < allCheckboxes.length; i += 1) {
        allCheckboxes[i].addEventListener("change", (e) => {
          if (allChecked()) {
            mainCheckbox.checked = true
          } else {
            mainCheckbox.checked = false
          }
        })
      }

      const allChecked = () => {
        for (let i = 0; i < allCheckboxes.length; i += 1) {
          if (!allCheckboxes[i].checked) {
            return false
          }
        }
        return true
      }

      const checkAll = () => {
        for (let i = 0; i < allCheckboxes.length; i += 1) {
          allCheckboxes[i].checked = true
        }
      }

      const uncheckAll = () => {
        for (let i = 0; i < allCheckboxes.length; i += 1) {
          allCheckboxes[i].checked = false
        }
      }

    <p>
        <input type="checkbox" id="all"/>
        <label for="all">Select all</label>
    </p>
    <ul id="li-list">
        <li><input class="maincheck" type="checkbox" id="one"/><label for="all">value 1</label></li>
        <li><input class="maincheck" type="checkbox" id="two"/><label for="all">value 2</label></li>
        <li><input class="maincheck" type="checkbox" id="three"/><label for="all">value 3</label></li>
        <li><input class="maincheck" type="checkbox" id="four"/><label for="all">value 4</label></li>
    </ul>

Answer 2

var handler = (function() {
  var mainBox = document.getElementById('all'),
      subBoxes = document.querySelectorAll('#li-list input[type="checkbox"]');
    
  var setSubs = function(flag) {
    [].forEach.call(subBoxes, function(s) {
      s.checked = flag;
    });
  }
  
  var testSubs = function() {
    var count = 0;
    [].forEach.call(subBoxes, function(s) {
      if (s.checked) count++;
    });
    return count == subBoxes.length;
  }
    
  return {
    clickBox : function(e) {
      if ('all' == e.target.id)
        setSubs(e.target.checked);
      else 
        mainBox.checked = testSubs();
    }
  };
})();

// add change event for all checkboxes
var boxes = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(boxes, function() {
  this.addEventListener('change', handler.clickBox);
});

<p>
  <input type="checkbox" id="all" />
  <label for="all">Select all</label>
</p>
<ul id="li-list">
  <li><input type="checkbox" id="one" /><label for="one">value 1</label></li>
  <li><input type="checkbox" id="two" /><label for="two">value 2</label></li>
  <li><input type="checkbox" id="three" /><label for="three">value 3</label></li>
  <li><input type="checkbox" id="four" /><label for="four">value 4</label></li>
</ul>