全部选中/取消选中，不更改布局HTML/JavaScript

我试图创建一个基本的网站，但我有一个方面的困难

我有一些框让用户显示他们想要什么或不想要什么（主要是布局），我创建了一个全选/取消全选按钮

我遇到的问题是，当我手动单击框时，布局会正确更改，但当我单击“全选”按钮时，什么都不会发生。我可能错过了什么，但我不知道是什么

下面是html的一部分，以及我试图修复的相关JavaScript代码：

函数checkAll1（）{
var inputs=document.querySelectorAll（'.control path'）；
对于（变量i=0；i

展示飞机飞行
在地面上展示飞机

包含

单击
在
内绑定以进行
循环

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

函数checkAll1（）{
var inputs=document.querySelectorAll（'.control path'）；
对于（var i=0；i
无需使用两个基本上做相同事情的函数，只需在按钮上保持一个状态，这就足够了，比如：


var checkButton=document.querySelector（'CheckUncheckAll'）；
var复选框=Array.from（document.querySelectorAll（'.control path'）；
//此事件将处理对按钮的任何单击
checkButton.addEventListener（'click'，函数（e）{
//默认情况下，newState已选中true，每次单击都会反转
var newState=（e.target.getAttribute（'data-checkstate'）| |'false'）=='false'；
//将所有复选框设置为true
复选框.forEach（cb=>cb.checked=newState）；
//保存当前检查状态
e、 target.setAttribute（'data-checkstate'，newState）；
});
复选框.forEach（cb=>cb.addEventListener（'click'，function（））{
var checkedItems=复选框。reduce（（总计，cb）=>total+（cb.checked？1:0），0）；
如果（checkedItems==0）{
//未选中任何项目，请保存该零件
checkButton.setAttribute（'data-checkstate'，false）；
}else if（checkedItems==checkbox.length）{
//所有项目都已选中，请保存该部分
setAttribute（'data-checkstate'，true）；
}
} ) );
//存根
函数planfly（）{}
函数plangr（）{}
#CheckUncheckAll[data checkstate=false]：在，
#CheckUncheckAll:not（[数据检查状态]）：在{
内容:'☑ 勾选所有'；
保证金：3倍；
填充物：5px；
}
#CheckUncheckAll[数据检查状态=true]：在{
内容:'☐ 取消选中“全部”；
保证金：3倍；
填充物：5px；
}

展示飞机飞行
在地面上展示飞机
按钮中缺少onclick事件您是否更改了行为，以便在完成全部选中或全部取消选中后单击单个项目时，您只能打开或关闭所有选项？那么按钮是什么呢？谢谢，起初我在理解函数式编程时遇到了一些困难，但这正是我想要的！