forms:
the `Radio` object

Radio buttons are used in forms to present sets of mutually exclusive options. In other words, radio buttons force the user to choose only one item from a set of choices, as demonstrated in the example below:

Who was the first president of the United States?
Washington
Lincoln
Jefferson

Take a moment to experiment with this form and observe its behavior. When you are done, push the "view source" button to see the underlying HTML code.

As you study this source code, you will see that the radio buttons have identical names but different values.

A radio button's name identifies the radio button's group. In this example, because I gave all of the radio buttons the same name, only one of them can be selected at a time.
A radio button's value, on the other hand, gives it a unique identity within the group. If the form is not going to be submitted to a query server, it is acceptable to omit this field.

In JavaScript, radio buttons in a form are represented by Radio objects. Since these objects usually occur in well-defined sets, JavaScript organizes the sets into arrays and treats Array objects, not Radio objects, as object-properties of the form. The name of a radio button array is the same as the group name specified in the radio buttons' HTML tags.

If this object-property hierarchy of radio buttons is a little confusing, the following summary may clear things up:

A form is a property of the document object:
document . form_name
A group of radio buttons is an array property of their form object:
document . form_name . radio_group_name
A single radio button is an element of an array of radio buttons:
document . form_name . radio_group_name [radio_index]
(Note that the first radio button in the form is index with 0, not 1.)

Radio objects contain many useful properties which can be read or assigned. These properties are given in the table below:

property name type description assignable
checked Boolean indicates whether the radio button is presently checked yes
defaultChecked Boolean indicates whether the radio button is checked by default
(i.e., checked when the form is first loaded or when the form is reset) yes
form Form the form containing the radio button no
name String indicates the radio button name (i.e., group name) yes
value String indicates the radio button value yes

property name	type	description	assignable
`checked`	`Boolean`	indicates whether the radio button is presently checked	yes
`defaultChecked`	`Boolean`	indicates whether the radio button is checked by default (i.e., checked when the form is first loaded or when the form is reset)	yes
`form`	`Form`	the form containing the radio button	no
`name`	`String`	indicates the radio button name (i.e., group name)	yes
`value`	`String`	indicates the radio button value	yes

The most useful property of a radio button object is checked. You can read this property to determine if the radio button is "on," or you can assign a new value to it in order to toggle its value. Note that whenever a new value is assigned to a Radio object's checked property, the other radio buttons in the same group automatically become unchecked.

Remember the example form I showed you earlier, regarding the first president of the United States? It might be a good idea to add a "check answer" button, so that the user can find out if he or she gave the right answer. In this example, we'll use the onClick event handler to tie the button to a function called check_answer, which checks the user's answer and tells him or her if the answer is correct.

Well, here it is. I suppose I could explain it in detail, but I'll bet you'll understand what's going on if you just view the source.

Who was the first president of the United States?
Washington
Lincoln
Jefferson

A discussion on how to determine which radio button is selected can be found in the companion article, Function get_radio_value. You can also look up the Radio object in Netscape's JavaScript Guide.

Charlton Rose
28 Jan. 1997

forms: the Radio object

forms:
the `Radio` object