[ski_woman]

Hello,
I am trying to write a piece of javascript for a form where I'd like the user to be able to select the checkbox "All". If the user checks "All", the rest of the checkboxes get greyed out (disabled).

I've been reading on event models and all sorts of things that make my mind spin. But I learned that there was a way to do this without hardcoding the onclick event into the html. I could put it in my javascript only, and it should work. I looked on the web and found scripts that do this, however they all only have very simple forms and I can't seem to adapt theirs with any facility. So, I tried to write my own. (ha) and now I'm here looking for help....

Yes, I suck at the DOM and javascript in general so what I coded doesn't do anything. I don't even get a juicy javascript error to help me.

Can you check out my god-awful code and give me a hint as to how to make it work?

I'm not interested in you doing this for me. I'm interested in learning why this doesn't work. Thank you in advance to those who would like to just shoot me the code. I really feel strongly that if I don't understand why this doesn't work, I'll be here in these forums forever sucking the life out of programmers who probably have better things to do. I'm embarrassed to always be mooching off the intellect of generous coders.

So, anyway, here's the javascript:

<script type="text/javascript">
<!--

document.theForm.elements['area[0]'].onclick = disableAll;


function disableAll(){
	if (document.theForm.elements['area[0]'].checked){
		// uncheck all other checkboxes
		alert("All is checked"); // alert for testing
	}
}  // end function
// -->
</script>

<form action="results.php" name="theForm" method="post">
	 <strong>Select an Area of Tucson</strong><br />
   <input type="checkbox" name="area[]" value="All" />	All areas<br />
   <input type="checkbox" name="area[]" value="Central" />	Central<br />
   <input type="checkbox" name="area[]" value="East/Northeast" />	East/Northeast<br />
   <input type="checkbox" name="area[]" value="North" />	North<br />
   <input type="checkbox" name="area[]" value="Northwest" />	Northwest<br />
   <input type="checkbox" name="area[]" value="South" />	South<br />
   <input type="checkbox" name="area[]" value="West" />	West<br /><br />


   <strong>Select an Age Group</strong><br />
   <input type="checkbox" name="age[]" value="all" />	All age groups<br />
   <input type="checkbox" name="age[]" value="I" />	Infants (6 weeks-12 months)<br />
   <input type="checkbox" name="age[]" value="T" />	Toddlers (12 months-2 years)<br />
   <input type="checkbox" name="age[]" value="P" />	Pre-K (2 years-5 years)<br />
   <input type="checkbox" name="age[]" value="K" />	Kindergarten (5 years)<br />
   <input type="checkbox" name="age[]" value="E" />	Extended Day (5 years-12 years)<br /><br />


<strong>Select a UA Discount Option</strong><br />
   <input type="checkbox" name="discount" value="yes" />	Show only facilities with UA discount<br />
   <input type="checkbox" name="discount" value="no" />	Show all facilities<br /><br />

	 <input type="submit" value="Start Search">
	</form>

If you need better access or want to see it... go here -> http://lifework.arizona.edu/cc/ref_prog/search.php

Thanks very much!

[TwoD]

Hi,
First I'd like to say that there's nothing wrong with asking for help, I myself have a lot of people to thank for answering hte questions I had when learning JS.

Since all your checkboxes (in a group) are named the same, you will only be able to reference to one of them. (The first one on the code)
I think you are looking for radiobuttons instead. They are much handier and only one of them in a group can be selected at once so you won't really need the script.
Just change type="checkbox" to type="radio" and rename them to just "Area".

I'll still give you an explanation to why your code doensn't work, and I'll treat them like the checkboxes they are now.

Remove the brackets "[]" after the names. Those are only used to reference to an entry in an Array, wich we don't have yet. when you try to reference to the first box by using "Area[0]", you will get an error.
your browser might be set to supress errors though.
This error occurrs because there is no object named "Area[0]", all you have is a bunch of objects named "Area[]".

To be able to refrence correctly to all these objects, since they don't have an individual name (and they shouldn't since they are part of a radio-button group), we need to create a collection of objects.
To do this we use myCollection=document.getElementsByName("Area") (remember to rename them all to "Area" and not "Area[]" for that will confuse things)
Once we have this collection we can make an individual reference to each object (or element as they are sometimes called) in the collection using an index number.
myCollection[0] will contain the first object and myCollection[1] will contain the second etc. myCollection will also get a propert called .length which tells you how many objects there are in the list (not zero based this time).
The last object you get by referencing to myCollection[myCollection.length-1]
The collection is really an Array.

Now that we know how to reference to each object in the collection we can check the first object in the list and see if it has checked using myCollection[0].checked.
If so, we loop through the rest of the boxes (ignoring the first) and disable them.
for(i=1;i<myCollection.lenght;i++){
myCollection[i].checked=false
myCollection[i].disabled=true
}
(I don't remember if you could set checked to false or if you had to use .removeAttribute("checked")
If the first box is not checked, we do another loop through the rest of the boxes to unluck them.

Hope you understood all that . I'm in abit of a hurry right now but if you have any questions just PM me.