Question

<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.如果取消选中其中一个子复选框，则取消选中父复选框

现在我的问题是，如果我们检查了一个子复选框，它会检查父复选框但是我希望检查父复选框，当且仅当选中所有子复选框时

Answer 1

您的代码可以简化：

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/

父子复选框选择

1 个答案: