Javascript 如何在选中所有复选框时选中所有复选框

当我在下拉菜单中选中所有复选框时，我想选中所有复选框。我是一个初学者js开发需要帮助。这是我的js代码

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
var selectallBox = document.getElementById('selectall');
var checkBoxes = document.querySelectorAll('.select-me');
selectallBox.addEventListener('click', function() {

for (var i = 0; i < checkBoxes.length; i++) {
    if (checkBoxes[i] != selectallBox)
        checkBoxes[i].checked = selectallBox.checked;
}


})
for (var i = 0; i < checkBoxes.length; i++) {
   checkBoxes[i].addEventListener('click', function() {

    selectallBox.checked = false; 
})
}
document.querySelector('.close-check-box').addEventListener('click' , function(){
checkboxes.style.display = 'none'
})

var expanded=false；
函数显示复选框（）{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
扩展=真；
}否则{
复选框.style.display=“无”；
扩展=假；
}
}
var selectallBox=document.getElementById（'selectall'）；
var复选框=document.querySelectorAll（'.select me'）；
selectallBox.addEventListener（'单击'，函数（））{
对于（变量i=0；i

这是我的js小提琴：

---

您可以将总复选框与选中的复选框计数进行比较，如果两个长度相同，则将复选框

选中的
属性设置为
真
，否则设置为
假
：

var selectedCount = document.querySelectorAll('.select-me:checked').length;
if(checkBoxes.length == selectedCount){
  selectallBox.checked = true;
}
else{
  selectallBox.checked = false; 
}


var expanded=false；
var selectBox=document.querySelector（“.selectBox”）
selectBox.addEventListener（'单击'，函数（））{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
扩展=真；
}否则{
复选框.style.display=“无”；
扩展=假；
}
});
var selectallBox=document.getElementById（'selectall'）；
var复选框=document.querySelectorAll（'.select me'）；
selectallBox.addEventListener（'click'，function（）{
for（设i=0；i

.multiselect{
宽度：400px；
}
.选择框{
位置：相对位置；
}
.选择框选择{
宽度：100%；
}
.多选{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}
#复选框{
显示：无；
边框：1pRGB（169169169169）实心；
填充顶部：10px；
边界半径：5px；
边缘顶部：10px；
高度：200px；
溢出y：滚动；
}
标签{
显示：块；
}
挑选{
填充：6px 12px；
边界半径：5px；
}
.关闭复选框：链接，
.关闭复选框：已访问{
填充：1px25px；
文字装饰：无；
字体大小：300；
背景色：#3498db；
边框：1px实心#3498db；
颜色：#fff；
左边距：14px；
盒影：02px5px0rgba（0,0,0,0.16），02px10px0rgba（0,0,0,0.12）；
边缘顶部：10px；
边缘底部：20px；
显示：内联块；
}
人力资源部风格二{
边界：0；
高度：1px；
背景图像：线性渐变（向右，rgba（1691691691690），rgba（1691691690.75），rgba（1691691690）；
}

选择一个选项
全选

弗斯特
第二
弗斯特
第二
弗斯特
第二
弗斯特
第二
弗斯特
第二
提交

var expanded=false；
var selectBox=document.querySelector（“.selectBox”）；
selectBox.addEventListener（“单击”，函数（）{
var复选框=document.getElementById（“复选框”）；
如果（！展开）{
复选框.style.display=“block”；
扩展=真；
}否则{
复选框.style.display=“无”；
扩展=假；
}
});
让checkboxesCheckedCount=0；
var selectallBox=document.getElementById（“selectall”）；
var复选框=document.querySelectorAll（“.select me”）；
选择AllBox.addEventListener（“单击”，函数（）{
对于（变量i=0；i
.multiselect{width:400px}.selectBox{position:relative}.selectBox{width:100%}.overSelect{position:absolute；left:0；right:0；top:0；bottom:0}复选框{display:none；边框：1px#A9A9A9A9A9实心；填充顶部：10px；边框半径：5px；边距顶部：10px；高度：200px；溢出-y:滚动}标签{display:block}显示：块}选择}填充：7px；边框：12px}.close复选框：链接，.close复选框：已访问{填充：1px25px；文本装饰：无；字体重量：300；背景色：3498db；边框：1px实心#3498db；颜色：#fff；左边距：14px；方框阴影：02px5px0rgba（0,0,0,16），02px10px0rgba（0,0,0,12）；边框顶部：10px；边框底部：20px；显示：内联块}hr.style-two{边框：0；高度：1px；背景图像：线性渐变（向右，rgba（169,0），rgba（169,75），rgba（169,0））}
选择一个选项全选
第一秒第一秒第一秒第二秒提交
除非我误解了你的问题，否则它似乎一直在工作