当我点击电子产品ID value = option
它将启用复选框笔记本电脑,电视,麦克风除了电子新。如果我点击电子新的Id value =option1
它应该启用所有复选框,如电子,电子新,笔记本电脑,TVS,麦克风,但在我的代码中,它不起作用。
$(document).ready(function () {
var checkboxes = document.querySelectorAll('input.subOption'),
checkall = document.getElementById('option');
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var checkedCount = document.querySelectorAll('input.subOption:checked').length;
checkall.checked = checkedCount > 0;
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}
checkall.onclick = function() {
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
}
});
body {
color: #555;
font-size: 1.25em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
margin: 50px 0;
}
ul {
list-style: none;
}
.container {
margin: 40px auto;
max-width: 700px;
}
li {
margin-top: 1em;
}
label {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>
<input type="checkbox" id="option"><label for="option"> Electronics</label>
<ul>
<li>
<input type="checkbox" id="option1"><label for="option1"> Electronics new</label>
<ul>
<li><label><input type="checkbox" class="subOption"> Laptops</label></li>
<li><label><input type="checkbox" class="subOption"> TVs</label></li>
<li><label><input type="checkbox" class="subOption"> Microphones</label></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
你需要解决一些问题:
<ul>
放在另一个<li>
中,如果你正在筑巢它们。$(document).ready(function() {
var checkboxes = document.querySelectorAll('input.subOption'),
checkall = document.getElementById('option'),
checkall1 = document.getElementById('option1');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var checkedCount = document.querySelectorAll('input.subOption:checked').length;
checkall.checked = checkedCount > 0;
checkall1.checked = checkedCount > 0;
checkall1.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}
checkall.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
checkall1.checked = this.checked;
}
}
checkall1.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
checkall.checked = this.checked;
}
}
});
body {
color: #555;
font-size: 1.25em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
margin: 50px 0;
}
ul {
list-style: none;
}
.container {
margin: 40px auto;
max-width: 700px;
}
li {
margin-top: 1em;
}
label {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>
<input type="checkbox" id="option"><label for="option"> Electronics</label>
</li>
<ul>
<li>
<input type="checkbox" id="option1"><label for="option1"> Electronics new</label>
</li>
<li>
<ul>
<li><label><input type="checkbox" class="subOption"> Laptops</label></li>
<li><label><input type="checkbox" class="subOption"> TVs</label></li>
<li><label><input type="checkbox" class="subOption"> Microphones</label></li>
</ul>
</li>
</ul>
</ul>
</div>