勾选/取消勾选所有，无布局更改 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绑定

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; 
  } 
}

Answer 2

不需要使用本质上做同样事情的 2 个函数，只需在按钮上保持一个状态，就足够了，比如：

 var checkButton = document.querySelector('#CheckUncheckAll'); var checkBoxes = Array.from( document.querySelectorAll('.control-path') ); // this event will handle any clicks to the button checkButton.addEventListener('click', function(e) { // newState has checked true by default, inverts per click var newState = (e.target.getAttribute('data-checkstate') || 'false') === 'false'; // set all the checkboxes to true checkBoxes.forEach(cb => cb.checked = newState); // save the current checkstate e.target.setAttribute('data-checkstate', newState); }); checkBoxes.forEach( cb => cb.addEventListener('click', function() { var checkedItems = checkBoxes.reduce( (total, cb) => total + (cb.checked ? 1 : 0), 0 ); if (checkedItems === 0) { // no items are checked, save that part checkButton.setAttribute('data-checkstate', false ); } else if (checkedItems === checkBoxes.length ) { // all items are checked, save that part checkButton.setAttribute('data-checkstate', true ); } } ) ); // stubs function planfly() {} function plangr() {}

 #CheckUncheckAll[data-checkstate=false]:before, #CheckUncheckAll:not([data-checkstate]):before { content: '☑ check all'; margin: 3px; padding: 5px; } #CheckUncheckAll[data-checkstate=true]:before { content: '☐ uncheck all'; margin: 3px; padding: 5px; }

 <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> <button type="button" id="CheckUncheckAll"></button>

所以这里真正发生的是，您的按钮将保持全局 checkstate 的状态，并根据您的点击将其反转。 我添加的一件小事是处理被单击的单个框，如果突然不再选中任何复选框，则按钮的状态将得到相应处理。

css 更改还有助于可视化，以便用户知道单击按钮时会发生什么，而不是猜测 2 中的哪一个会发生 ;)