Figure 22-10.  A few check boxes.

Look through the script for a few minutes, and make sure you understand the recursive flow and the handling of time-related features. Since most of the features in this script should be well known to you by now, we’ll just cover the new and difficult ones.

Take a look at the following statements from the start() function:

// set the button's label to "stop"
document.forms[0].general.value = "stop"

// assign the stop function reference to the button's onClick
 event handler
document.forms[0].general.onclick = stop

The first statement adjust the button’s label by assigning it a new value—stop. The second statement assigns a function reference (no parentheses because it is a function reference, not a function call) to the button’s onClick event handler. Notice that the event handler must be specified in lowercase letters. These statements convert the Start button to a Stop button. The following statements from the stop() function convert the Stop button back to a Start button, on the fly:

// set the button's label to "start"
document.forms[0].general.value = "start"

// assign the start function reference to the button's onClick
  event handler
document.foms[0].general.onclick = start

Notice that the button is labeled Stop when the timer is running and is labeled Start otherwise.

The form in Example 22-6 consists of two elements. The first one is a read-only text object (set via an event handler), whereas the second one is a simple button.

Setting the value of a button is somewhat problematic. First, the button size is not adjusted to the new label, so any excess text is dropped on both sides. Another problem is that since the button label is centered, you do not have control over its alignment with other buttons of different form elements. If you initialize a button to a very long string via its HTML attribute (try assigning a string with many spaces to VALUE), you can even run a T-banner on the button!

Checkbox Object

HTML Syntax

A check box is a small box which reflects an “on” or “off” state. An HTML check box is a form element that closely resembles a check box on a paper form. If a mark is placed in the box, the current state is considered true. If the check box is unchecked, the current state is false.

Check boxes are used a lot in server-based forms. If a box is checked, it is included in the submitted data, whereas if it is empty it is excluded from the data submitted to the server. Since a check box is an individual form element which is not grouped with other elements, you should apply a distinct name to every check box in a form. The user can check or uncheck a text box at any time after the page has been laid out.

The general syntax of a check box is as follows:

<INPUT
 TYPE="checkbox"
 NAME="checkboxName"
 VALUE="checkboxValue"
 [CHECKED]
 [onClick="handlerText"]>

Both the NAME and VALUE attributes specify internal values which are not displayed on the page. In order to label a check box, you should simply place the label directly after the check box, so it appears as if connected to the object. The following piece of code demonstrates this trick:

Select all the computers used at your business:
<P>
<INPUT TYPE="checkbox" NAME="PC">PC
<P>
<INPUT TYPE="checkbox" NAME="Mac">Macintosh
<P>
<INPUT TYPE="checkbox" NAME="Unix">Unix (X-Windows)

The output page is the following:

In order to create a check box that is initially checked, you simply specify the CHECKED attribute, without assigning it any value. Its presence determines the initial state of the check box when the page loads.

A JavaScript check box provides a wide variety of functionality, but you should not use it as a regular button (supporting, for example, an onClick event handler); rather use it only as a “yes”/“no” selection interface. You can, however, use the click event to trigger a side-effect statement. It is important to recognize that a check box is primarily a toggle switch.

JavaScript Access

There are basically four ways to reference a check box:

[window.]document.formName.checkboxName
[window.]document.formName.elements[index]
[window.]document.forms[index].checkboxName
[window.]document.forms[index].elements[index]

Event Handlers

onClick

Since a check box responds to only the click event, the checkbox object does not support event handlers other than onClick. Use this event handler when you want to invoke a function or execute a statement immediately when the user clicks a check box. A click event occurs when the user clicks a check box, regardless if it is checked or empty.

Again, be extremely conservative when using this event handler. A check box should be used only for “yes”/“no” voting interface.

Methods

click()

The checkbox object supports only the click() method, which is equivalent to manually clicking the check box. You can use this method to implement a nonmodifiable check box, for example, by clicking the check box whenever the user clicks it, thus always reversing the user’s action and leaving the check box untouched. Here is how to define such a “read-only” check box:

<INPUT TYPE="checkbox" onClick="this.click()">

Another useful implementation of this method is to open an invisible connection between two or more check boxes. Here is an example script that always keeps two check boxes at the same state (checked or unchecked):

<SCRIPT LANGUAGE="JavaScript">
<!--

function connectMe(destination) {
 document.forms[0].elements[destination].click()
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" onClick="connectMe(1)"> Number 1<BR>
<INPUT TYPE="checkbox" onClick="connectMe(0)"> Number 2
</FORM>

Each check box’s onClick event handler invokes the connectMe() function with the target check box’s index as the argument. The second check box’s event handler, for example, calls connectMe() with a 0 value because it is connected to the first check box (its index is 0). The connectMe() function simply emulates a click event for the form element at the given index.

The click() method does not trigger the onClick event handler so you should not worry about the script getting into an infinite loop here. You can generalize the connectMe() function to handle an array of check boxes with a for loop.