Q:

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'])">

above code creates dynamic child checkboxes for each row by fetching data from database
<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="allChecked(this, this.form.elements['prnt'])">

and above is the parent checkbox
javascript code:
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;
}

above is my code for parent child checkbox selection
it does:
1. checks/unchecks child checkboxes on checking/unchecking parent checkbox
2. unchecks parent checkbox if one of the child checkbox is unchecked
and now my problem is, it checks parent checkbox if we checked a single child checkbox but i want parent checkbox to be checked if and only if all child checkboxes are checked

A:

Your code a can be simplified:
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;
}

and 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>

I also got rid of inline event handlers.
Demo: http://jsfiddle.net/TXRNF/

