实际上,我实现了一半的代码,例如是否选中了一个复选框,然后选中该复选框下的所有复选框。
但是,如果我也将其他复选框也标记为未选中,那么现在我想取消选中主复选框...
请帮我解决这个问题...
我的代码:
<script type="text/javascript">
function SelectAllCheckboxesA(chk, chk1, chk2, chk3, chk4) {
document.getElementById(chk1).checked = document.getElementById(chk2).checked = document.getElementById(chk3).checked = document.getElementById(chk4).checked = document.getElementById(chk).checked;
if (document.getElementById(chk1).checked == false || document.getElementById(chk2).checked == false || document.getElementById(chk3).checked == false || document.getElementById(chk4).checked == false) document.getElementById(chk).checked = false;
}
</script>
答案 0 :(得分:0)
如果您将css类分配给父复选框,然后将css类分配给所有孩子,则将更加容易。
<html>
<body>
<br><br>
<input type="checkbox" class="parent" name="vehicle" > Parent<br>
<br>
<input type="checkbox" class="child" name="vehicle"> child 1<br>
<input type="checkbox" class="child" name="vehicle"> child 2<br>
<input type="checkbox" class="child" name="vehicle"> child 3<br>
<script type="text/javascript">
var parentCheckBox = document.querySelector(".parent");
var childCheckBoxes = document.querySelectorAll(".child");
parentCheckBox.onclick = function(){
childCheckBoxes.forEach(function(child){
child.checked=parentCheckBox.checked;
});
}
childCheckBoxes.forEach(function(child){
child.onclick = function(){
var allchecked = true;
childCheckBoxes.forEach(function(childBox){
allchecked = allchecked? childBox.checked : allchecked;
});
parentCheckBox.checked = allchecked;
}
});
</script>
</body>
</html>