我（至少）不熟悉 JavaScript，我需要它来相互切换多个复选框。 我从那个stackoverflow问题中获取了一段代码，效果很好！
var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
var checked = this.checked;
var otherCheckboxes = document.querySelectorAll(".toggleable");
[].forEach.call(otherCheckboxes, function(item) {
item.checked = checked;
});
});<body>
<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
<br/>
<input type="checkbox" name="checkBox1" value="checked1" class="toggleable">
<input type="checkbox" name="checkBox2" value="checked2" class="toggleable">
<input type="checkbox" name="checkBox3" value="checked3" class="toggleable">
</body>但是... 我需要在我的页面（和网站）中将它用于更多组，我想知道如何打开一个函数，该函数将使用“this”和主复选框上所需的类参数，例如：
function checkAllBox(ref, classname) {
var checkAll = document.getElementById(ref);
checkAll.addEventListener("change", function() {
var checked = this.checked;
var otherCheckboxes = document.querySelectorAll(classname);
[].forEach.call(otherCheckboxes, function(item) {
item.checked = checked;
});
});
};<body>
<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all" onclick="checkAllBox('id_check_uncheck_all','toggleable')">
<br/>
<input type="checkbox" name="checkBox1" value="checked1" class="toggleable">
<input type="checkbox" name="checkBox2" value="checked2" class="toggleable">
<input type="checkbox" name="checkBox3" value="checked3" class="toggleable">
</body>我还有一个功能也很好用，但是使用复选框目标名称而不是复选框目标类，这可能会与其他 php 方法混淆：
<script type="text/javascript">
function checkAllBox(ref, name) {
var form = ref;
while (form.parentNode && form.nodeName.toLowerCase() != 'form') { form = form.parentNode; }
var elements = form.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == 'checkbox' && elements[i].name == name) {
elements[i].checked = ref.checked;
}
}
}
</script>
我尝试了很多修改，但似乎都不起作用（但由于我缺乏 JavaScript 知识，我对自己的尝试感到盲目）...我的“灵感”stackoverflow 页面上的评论建议这样做，但我无法达到这个性能...
有人可以帮助我吗？
如果所有子项也都被选中/取消选中，您可能希望从容器中进行委托并选中/取消选中全部。
大量注释和“额外”代码来显示代码部分中的内容/内容。
自从您询问“this”以来，我注释掉了代码的一部分，但此处未使用。
var checkAll = document
.querySelectorAll('.checkbox-container input[type="checkbox"]')
.forEach((checkbox) => {
checkbox.addEventListener("change", function(event) {
let checkTarget = event.currentTarget;
//let checkThis = this;
// always true: console.log(checkThis == checkTarget);
let container = checkTarget.closest('.checkbox-container');
let checkAll = container.querySelector(".check-all"); //assumes ONE checkall per container
let haveCheckedAll = checkTarget == checkAll;
let isAllChecked = checkAll.checked;
let otherCheckboxes = [...container.querySelectorAll('input[type="checkbox"].toggleable')];
if (!haveCheckedAll) {
let areAllDetailedChecked = otherCheckboxes.filter((item) => {
return item.checked;
}).length == otherCheckboxes.length;
checkAll.checked = areAllDetailedChecked;
} else {
otherCheckboxes.forEach((item) => {
item.checked = isAllChecked;
});
}
});
});.checkbox-container,
.check-all-container {
border: 1px solid #00FF00;
}
.checkbox-container {
border-color: #0000ff;
margin: 1em;
}<body>
<div class="checkbox-container">First
<div class="check-all-container">
<label for="id_check_uncheck_all">Select All</label>
<input class="check-all" type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
</div>
<input type="checkbox" name="checkBox1" value="checked1" class="toggleable">
<input type="checkbox" name="checkBox2" value="checked2" class="toggleable">
<input type="checkbox" name="checkBox3" value="checked3" class="toggleable">
</div>
<div class="checkbox-container">Second
<div class="check-all-container">
<label for="check_uncheck_allTwo">Select All</label>
<input class="check-all" type="checkbox" name="check_uncheck_allTwo" value="false" id="check_uncheck_allTwo">
</div>
<input type="checkbox" name="checkBox1" value="checked1" class="toggleable">
<input type="checkbox" name="checkBox2" value="checked2" class="toggleable">
<input type="checkbox" name="checkBox3" value="checked3" class="toggleable">
</div>
</body>