繁体   English   中英

父子复选框选择

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM