[英]parent child checkbox selection
<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="childChecked(this, this.form.elements['prnt'])">
上面的代码通过从数据库中获取数据为每一行创建动态子复选框
<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="allChecked(this, this.form.elements['prnt'])">
上面是父复选框
JavaScript代码:
function checkAll(){
var main_check=document.getElementById("check");
var all_check=document.getElementsByName('all[]');
if(main_check.checked){
for(var i=0;i<all_check.length;i++){
all_check[i].checked=true;
}
}else{
for(var i=0;i<all_check.length;i++){
all_check[i].checked=false;
}
}
}
function childChecked(child, prnt){
if (!child.length){ // if not an array
prnt.checked = child.checked;
//alert(prnt.checked);
return;
}
for (var i=0; i<child.length; i++){
if (!child[i].checked)
return;
}
prnt.checked = true;
}
上面是我选择父子复选框的代码:1.在选中/取消选中父复选框时选中/取消选中子复选框。2.如果未选中子复选框之一,则取消选中父复选框。
现在我的问题是,如果我们选中了单个子复选框,它将检查父复选框,但我希望仅当所有子复选框均被选中时才选中父复选框
您的代码可以简化:
var main_check = document.getElementById("check");
var all_check = document.getElementsByName('all[]');
main_check.onchange = checkAll;
for (var i = 0; i < all_check.length; i++) {
all_check[i].onchange = childChanged;
}
function checkAll() {
for (var i = 0; i < all_check.length; i++) {
all_check[i].checked = main_check.checked;
}
}
function childChanged() {
if (!this.checked) {
main_check.checked = false;
return;
}
// Check if main checkbox should be checked
for (var i = 0; i < all_check.length; i++) {
if (!all_check[i].checked) return;
}
main_check.checked = true;
}
和HTML:
<input type="checkbox" id="check" /> Main
<ul>
<li><input type="checkbox" name="all[]" /></li>
<li><input type="checkbox" name="all[]" /></li>
<li><input type="checkbox" name="all[]" /></li>
<li><input type="checkbox" name="all[]" /></li>
</ul>
我还摆脱了内联事件处理程序。
演示: http : //jsfiddle.net/TXRNF/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.