trouble with an if statement

[too much information]

I'm not much of a Javascript guy so this was honestly a well thought out attempt at creating a function, but I seem to have hit a wall.

Basically I'm trying to create a generic 'select all' checkbox function. So if you check the master box, the function checks all of the sub boxes. That's not the problem though because that part works.

What doesn't work is when you uncheck the box, it doesn't uncheck the sub boxes.

Note that this does work if I check the state of the first sub box to determine if I should 'checkAll' or 'uncheckAll' so my error is in this function. For some reason unchecking 'nameOfBox'+'All' does not trigger the uncheckAll function, but checking it initially does trigger the checkAll function.

function toggleChecked(field){
 with (document.form) {
 for (var i=0; i < elements.length; i++) {
 if (elements[i].type == 'checkbox' && elements[i].name == field+'All') {
 if (elements[i].checked == true) {
  checkAll(field);
 }else{
  uncheckAll(field);
 }
 break;
 }
 }
 }
}

Like I said, I'm not really a Javascript guy so I'm sure it's something dumb that I'm just not familiar with. Also, any suggestions on my technique are welcome as well but I don't want to get into jQuery just yet. (One project at a time) This was adapted from something that worked in another case so it's truly makeshift.

[Fotiman]

A few things.
First, I would avoid using the "with" statement.
[yuiblog.com...]

Next, do you have more than one checkbox of the form field+'All'? Because that break statement is going to prevent you from reaching anything past the first one.

[too much information]

Oh, nice link. But I only have one of each 'All' fields, so there is only one answer for each call of the function.

Also, the break is to prevent the loop from continuing after the initial checkbox is found.

[too much information]

Alright, because of the link and also because I really don't have more than two controlling checkboxes I changed my code a bit.

Now each 'select all' box has an ID and that makes the whole thing much easier to deal with.

So here is what I have (and it now works) just in case anyone else is interested:

function toggleCheck(field){
 if (document.getElementById(field+'All').checked == true) {
  checkAll(field);
 }else{
  uncheckAll(field);
 }
}

I think I was trying to apply too much of a generality to the function when it really didn't need to be that complicated.

Thanks for the link and the help!