我使用了以下 codepen snippet在我的 HTML 页面中实现嵌套复选框。原始代码仅适用于一组嵌套复选框，因此我尝试扩展到多个。但是，它似乎适用于本例中的最后一个 Main 元素 Main2 但不适用于之前的元素。
function loadExpandableCheckboxes() {
var expandableCheckboxes = document.getElementsByClassName("expandable-checkbox");
for (var i = 0; i < expandableCheckboxes.length; i++) {
var checkboxMainOption = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-main-option")[0];
var checkboxSubOptions = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-sub-option");
for (var j = 0; j < checkboxSubOptions.length; j++) {
checkboxSubOptions[j].onclick = function() {
var checkedCount = 0;
for (var k = 0; k < checkboxSubOptions.length; k++) {
if (checkboxSubOptions[k].checked) {
checkedCount++;
}
}
checkboxMainOption.checked = checkedCount > 0;
checkboxMainOption.indeterminate = checkedCount > 0 && checkedCount < checkboxSubOptions.length;
}
}
checkboxMainOption.onclick = function() {
for (var j = 0; j < checkboxSubOptions.length; j++) {
checkboxSubOptions[j].checked = checkboxMainOption.checked;
}
}
}
}
onload=loadExpandableCheckboxes;body {
color: #555;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
}
li {
margin-top: 1em;
}
label {
font-weight: bold;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="checkbox-container">
<ul>
<li>
<div class="expandable-checkbox">
<label><input type="checkbox" class="expandable-checkbox-main-option">Main 1</label>
<ul>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 1</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 2</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 3</label></li>
</ul>
</div>
</li>
<li>
<div class="expandable-checkbox">
<label><input type="checkbox" class="expandable-checkbox-main-option">Main 2</label>
<ul>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 1</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 2</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 3</label></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>最佳答案
这很有趣。所以基本上要停止用第二组覆盖第一组复选框，您需要使用临时范围来保留变量。在下面的代码片段中，您会看到我添加了一个 IFFE。到你的 i 循环。
它所做的是获取变量 i，将其传递给立即调用自身的临时函数。下次循环运行时，将“创建”一个新的临时函数，从而保留最后一个函数的范围，并且不会覆盖以前的复选框集。
$(document).ready(function() {
//find the wrappers
var expandableCheckboxes = document.getElementsByClassName("expandable-checkbox");
//loop through the wrappers, count them one by one
for (var i = 0; i < expandableCheckboxes.length; i++) (function(i){
//find the the main
var checkboxMainOption = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-main-option")[0];
//find the subs
var checkboxSubOptions = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-sub-option");
//loop through subs
for (var k = 0; k < checkboxSubOptions.length; k++) {
//add listener fo each sub
checkboxSubOptions[k].onclick = function() {
var checkedCount = 0;
for (var j = 0; j < checkboxSubOptions.length; j++) {
if (checkboxSubOptions[j].checked) {
checkedCount++;
}
}
//mark appropriately
checkboxMainOption.checked = checkedCount > 0;
checkboxMainOption.indeterminate = checkedCount > 0 && checkedCount < checkboxSubOptions.length;
}
}
//add listener to main
checkboxMainOption.onclick = function() {
for (var j = 0; j < checkboxSubOptions.length; j++) {
checkboxSubOptions[j].checked = checkboxMainOption.checked;
}
}
})(i)
});body {
color: #555;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
}
li {
margin-top: 1em;
}
label {
font-weight: bold;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="checkbox-container">
<ul>
<li>
<div class="expandable-checkbox">
<label><input type="checkbox" class="expandable-checkbox-main-option">Main 1</label>
<ul>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 1</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 2</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 3</label></li>
</ul>
</div>
</li>
<li>
<div class="expandable-checkbox">
<label><input type="checkbox" class="expandable-checkbox-main-option">Main 2</label>
<ul>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 1</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 2</label></li>
<li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 3</label></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>关于javascript - 嵌套复选框不适用于多个主要选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46957573/