Check/Uncheck CheckBoxes Using CheckBox

[rn5a]

I have a simple HTML page which has 4 CheckBoxes. When a user comes to this page for the first time, all the 4 CheckBoxes are unchecked. I want 4 things:

1. When the last CheckBox named 'CheckAll' is checked, the first 3 CheckBoxes should get checked.

2. If all the 4 CheckBoxes are checked & the last CheckBox is unchecked, then the first 3 CheckBoxes should also get unchecked.

3. Assuming that all the 4 CheckBoxes are checked, if one or more of the first 3 CheckBoxes is unchecked, the last CheckBox should also get unchecked.

4. Assuming that any one or more of the first 3 CheckBoxes is unchecked & the last CheckBox is also unchecked, when the unchecked CheckBox in the first 3 ChecBoxes is checked i.e. all the first 3 CheckBoxes are checked, the last CheckBox should also get checked.

I could successfully implement the first three functionalities but am getting stuck up in implementing the last functionality. This is how I did it:

<script language="JavaScript">
function checkAll(field){
    for(i=0;i<field.length;i++){
        if(document.frm1.CheckAll.checked==true){
            field[i].checked=true;
        }
        else if(document.frm1.CheckAll.checked==false){
            field[i].checked=false;
        }
    }
}

function checkUncheck(field){
    for(i=0;i<field.length;i++){
        if(field[i].checked==false){
            document.frm1.CheckAll.checked=false;
        }
    }
}
</script>

<form name="frm1">
<input type=checkbox name="list" value="1" onClick="checkUncheck(document.frm1.list)">1<br>
<input type=checkbox name="list" value="2" onClick="checkUncheck(document.frm1.list)">2<br>
<input type=checkbox name="list" value="3" onClick="checkUncheck(document.frm1.list)">3<br>
<input type=checkbox name="CheckAll" value="CHECK ALL" onClick="checkAll(document.frm1.list)">CHECK ALL
</form>

Can someone please guide me on how do I incorporate the fourth functionality stated above?

Please note that excluding the last CheckBox, there can be any number of CheckBoxes i.e. except for the last CheckBox, the rest of the CheckBoxes will be created dynamically (which is being done using ASP.NET).

[yellabuff]

function checkUncheck(field){
    var cnt=0;
    for(i=0;i<field.length;i++){
        if(field[i].checked==false){
            document.frm1.CheckAll.checked=false;
        } else {
			cnt++;
		}
    }
    if (cnt == field.length) document.frm1.CheckAll.checked=true;
}

[mjdamato]

Forgive me, but I'm all about efficient code;

In your checkAll function you are stepping through each field and doing the if/else comparrison for the checkAll field. You only need to check that comparrison once.

function checkAll(field){
    checkState = (document.frm1.CheckAll.checked) ? true : false;
    for(i=0;i<field.length;i++){
        field[i].checked=checkState;
    }
}

yellabuff, I like that logic. I would make one change. If a field is found to not be checked, uncheck the checkAll field and return. then you do not need to count the checked fields and do the comparrison at the end. If the script gets to the end you know that all the fields were checked.

function checkUncheck(field){
    for(i=0;i<field.length;i++){
        if(!field[i].checked){
            document.frm1.CheckAll.checked=false;
            return;
        }
    }
    document.frm1.CheckAll.checked=true;
}