javascript - 全部选中/取消选中，无布局更改 HTML/JavaScript

Question

我正在尝试创建一个基本网站，但我在一个方面遇到了一些困难。

我有一些框让用户显示他们想要或不想要的东西(主要是布局)，我创建了一个选中/取消选中所有按钮。

我遇到的问题是，当我手动单击框时，布局会正确更改，但是当我单击“全部选中”按钮时，没有任何反应。我可能错过了什么，但我没看到什么。

这是 html 的一部分，以及我正在尝试修复的相关 JavaScript 代码:

function checkAll1() {

    var inputs = document.querySelectorAll('.control-path');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = true;
    }
  
    this.onclick = uncheckAll1;
  }
  
  function uncheckAll1() {
    var inputs = document.querySelectorAll('.control-path');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = false;
    }
  
    this.onclick = checkAll1; 
  }
  
  var el = document.getElementById("checkall1"); 
  el.onclick = checkAll1; 
          

    <label class="control control-checkbox">
      Show Planes flying
      <input class="control-path" id="pfshow" type="checkbox" onchange="planfly();"/>
      <div class="control_indicator"></div>
    </label> 
    <label class="control control-checkbox">
      Show planes on ground
      <input class="control-path" id="pfgroushow" type="checkbox"onchange="plangr();"/>
      <div class="control_indicator"></div>
    </label>
    <input type="button" id="CheckUncheckAll" value="Check/Uncheck all" />  

Answer 1

在 for 循环中包含 click 绑定(bind)

function checkAll1() { 
  var inputs = document.querySelectorAll('.control-path'); 
  for (var i = 0; i < inputs.length; i++) { 
    inputs[i].checked = true; 
    inputs[i].onclick = uncheckAll1; 
  }  
} 

function uncheckAll1() { 
  var inputs = document.querySelectorAll('.control-path'); 
  for (var i = 0; i < inputs.length; i++) { 
    inputs[i].checked = false;
    inputs[i].onclick = checkAll1; 
  } 
}