Learn Advanced JavaScript Programming

Figure 22-11. A group of radio buttons (only one can be selected).

name

A checkbox object’s name property reflects the NAME attribute of the <INPUT> element definition. It is a read-only property, so you cannot modify it. You should be as descriptive as possible when choosing a NAME attribute, especially for server-side applications which access the box’s value only through its name. If your form is primarily for JavaScript processing, you can use the NAME attribute to mimic the functionality of a second VALUE attribute.

value

The value property initially reflects the VALUE attribute of the <INPUT> definition, but it can be adjusted via JavaScript script at any time.

Just like a text object’s string value, the value property represents the checkbox object’s value, and as such is very important for forms processed by the server. By setting the value attribute, you explicitly affect the content of the form submitted to the server.

Although you can accomplish many tasks without using the value property, it is sometimes very convenient to use this property instead. The following example demonstrates how to use a check box list to print all operating systems which your business uses:

<HTML>
<HEAD>
<TITLE>Checkbox value property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function displayList(list) {
  var total = ""

  for (var i = 0; i < list.length; ++i) {
if (list[i].checked)
  total += list[i].value + "\r"
 }
 if (total == "")
 alert("No OS selected!")
 else
 alert(total)
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" VALUE="DOS / Windows"
NAME="computer">DOS/Windows 3.1x<BR>
<INPUT TYPE="checkbox" VALUE="Windows 95"
NAME="computer">Windows 95<BR>
<INPUT TYPE="checkbox" VALUE="Macinstosh"
NAME="computer">Macintosh<BR>
<INPUT TYPE="checkbox" VALUE="Unix"
NAME="computer">Unix<BR>
<INPUT TYPE="button" VALUE="display list"
onClick="displayList(this.form.computer)">
</FORM>
</BODY>
</HTML>

First of all, notice that the form consists of four check boxes and one button. The button’s onClick event handler invokes the displayList() function, passing the computer form element as an argument. Since there are four elements matching that name, this.form.computer is actually an array of four check box elements. A check box’s VALUE attribute specifies the operating system associated with that check box.

The displayList() function is based on a simple for loop which concatenates the checkbox values inside the local variable total, inserting new line characters as delimiters. When the loop terminates, local holds a list of all the operating systems that the user had checked. If the value of total is an empty string, the user did not check any of the boxes, and an appropriate message is displayed. Otherwise, the list of the checked operating systems is displayed in an alert box.

Radio Object

HTML Syntax

A radio button provides an interface to select an option among multiple choices. Unlike check boxes which are rectangular in shape, radio buttons are circular ones. Another difference between the two types of buttons is that radio buttons belong to a group of buttons and are not independent. A group of radio buttons behaves exactly like the station buttons on your old car radio. It has two possible states: one button is pressed (ON) or all buttons are released (OFF). When a button is pressed, the currently pressed button is automatically released.

All buttons of the same group share the same name. In fact, the identical name is an indication to the browser to restrict the number of checked radio buttons to one. Clicking a button automatically deselects the currently selected button of the same group. The general syntax of a single radio button is as follows:

<INPUT
 TYPE="radio"
 NAME="groupName"
 VALUE="buttonValue"
 [CHECKED]
 [onClick="handlerText"]>

Keep in mind that you should only use this type of button to enable a single selection among multiple choices. The following construct, for example, provides the means to choose a computer type out of three options:

What computer do you most often use:
<P>
<INPUT TYPE="radio" NAME="computers"
VALUE="unix">Unix (X-Windows)
<P>
<INPUT TYPE="radio" NAME="computers"
VALUE="pc">PC
<P>
<INPUT TYPE="radio" NAME="computers"
VALUE="mac">Macintosh

When implemented correctly within a form, this group of elements appears as outlined below:

JavaScript Access

Although a radio button is a simple form element, its reference is an unusual one. You can reference a radio button group via one of the following expressions:

[window.]document.formName.radioGroupName
[window.]document.formName.elements[ElementIndex]
[window.]document.forms[FormIndex].radioGroupName
[window.]document.forms[FormIndex].elements[ElementIndex]

As explained at the beginning of this chapter, elements with the same names are combined and indexed into a single array. Therefore, the above references are actually arrays, where each element is a single radio button. Hence, the four ways to reference a specific radio button are as follows:

[window.]document.formName.radioGroupName[ButtonIndex]
[window.]document.formName.elements[ElementIndex][ButtonIndex]
[window.]document.forms[FormIndex].radioGroupName[ButtonIndex]
[window.]document.forms[FormIndex].elements[ElementIndex][ButtonIndex]

You can look up the number of radio buttons in a group by accessing the group’s length attribute. For more details, check the section about the name property of the text object.

Internet Explorer does not work perfectly well with the radio object, so be sure to test your script with both browsers.

When a radio button group consists of only one radio button, it is not considered a group. Therefore, you cannot access the array, and references such as the following ones are not valid:

[window.]document.formName.radioGroupName[index]
[window.]document.formName.radioGroupName.length

Instead, you must access the radio button directly, without an array:

[window.]document.formName.radioButtonName

The difference in referencing a single button and a multiple-button group complicates scripts quite a bit. If the radio buttons are created with plain HTML, you obviously know if the number of radio buttons is greater than one and access them accordingly. If the radio buttons are automatically generated by a script, then you have to add a counter that will indicate if the number of buttons is greater than one.

Event Handlers

onClick

A radio object supports only one event handler—the onClick event. When the user checks (fills) a radio button, a click event occurs, and the specified statements are executed. See the listings for the checkbox object for more details, syntax, and examples.

Table of Contents