I've used the following codepen snippet to implement nested checkboxes into my HTML page. The original code only catered for one set of nested checkboxes so I've tried to expand to multiple. So far my code has 2 problems, that I can see:
- The
onclickis not binding to each of thecheckboxSubOptions - The
checkboxSubOptionsis being overwritten on each loop so thecheckboxMainOption.onclickno longer works for the first checkboxes
$(document).ready(function() {
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");
checkboxSubOptions.onclick = function() {
var checkedCount = 0;
for (var j = 0; j < checkboxSubOptions.length; j++) {
if (checkboxSubOptions[j].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;
}
}
}
});
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="http://ift.tt/2a1Bldc"></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>
Aucun commentaire:
Enregistrer un commentaire