父子復選框選擇

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/