Radio buttons and check boxes are rendered similarly but serve distinct purposes. Radio buttons are used to represent a set of two or more mutually exclusive items. Check boxes are used to specify a decision with two or more independent choices.
Radio buttons are similar to the single-select list boxes introduced earlier in this chapter. Radio buttons can be used interchangeably with a single-select list, but they are most effective when a small number of options are available. For example, to specify a person's gender, a radio button group would be more effective than a single-select list box.
Radio buttons are more difficult to use than a list box if you are building the set of options dynamically. For this scenario, the list box is more appropriate because items in a list box can easily be manipulated as a group, whereas each radio button is actually a separate control that needs to be manipulated independently, and adding or removing radio buttons requires manipulating the contents of the document directly.
Radio buttons are exposed as a group similar to the options in a single-select list box. As mentioned, specifying the same name for buttons within the same scope creates a group. Mutual exclusion based on name is supported only for radio buttons. When the submission of a form with a radio button group occurs, of all the radio buttons in a group only the value for the selected radio button is submitted. Assigning the same name to any other type of control does not cause any special submission behavior. When multiple controls that are not radio buttons share the same name, all name-value pairs are appropriately submitted depending on the rules for each control—for example, named check boxes are submitted only if they are checked, and all named text boxes are submitted.
Supporting Custom List Values
Radio buttons are useful for providing a list of possible responses in a survey. Sometimes you might want to allow a user-entered value as a last resort if none of the list options are valid. The following code demonstrates a simple way to provide a text box for a custom response if the user's choice is not listed—the text control is enabled only when the user selects Other.
<HTML>
<HEAD>
<TITLE>Custom Entry</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkRadio(f) {
f.Custom.disabled = !f.Q1["Other"].checked;
if ("Other" == event.srcElement.id)
f.Custom.focus();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Demo" ONCLICK="checkRadio(this);">
<FIELDSET>
<LEGEND>Where did you buy this book?</LEGEND>
<P><INPUT ID="BStore" TYPE=RADIO NAME="Q1"
VALUE="Bookstore">
<LABEL FOR="BStore"> Bookstore</LABEL>
<P><INPUT ID="MOrder" TYPE=RADIO NAME="Q1"
VALUE="Mail Order">
<LABEL FOR="MOrder"> Mail Order</LABEL>
<P><INPUT ID="CStore" TYPE=RADIO NAME="Q1"
VALUE="Comp Store">
<LABEL FOR="CStore"> Computer Store</LABEL>
<P><INPUT ID="Other" TYPE=RADIO NAME="Q1">
<LABEL FOR="Other"> Other: </LABEL>
<INPUT ID="Custom" NAME="Other" TYPE=TEXT DISABLED>
</FIELDSET>
</FORM>
</BODY>
</HTML>
This code works properly regardless of whether the user clicks on the label for Other or on the radio button itself because when a user clicks on the label the onclick event is first fired with srcElement as the label and then again with srcElement as the radio button. The onclick event handler also fires if the radio button is selected using the keyboard because the event is not tied to the mouse but rather to the operation of changing the value of the control. For this reason, a single onclick event handler for the radio button itself is sufficient to catch any potential change.
Check boxes are useful for asking yes/no questions. In many cases, text boxes are used to specify other relevant information when necessary. By writing some simple code, you can make a check box enable or disable the relevant fields on a form. In the following code, if users request more information, they must enter their e-mail name and address. If they don't request additional information, the two fields are not used.
<HTML> <HEAD> <TITLE>Enabling Entry Fields</TITLE> </HEAD> <BODY> <FORM NAME="Info"> <LABEL FOR=INFO>Send Info:</LABEL> <INPUT ID=INFO TYPE=CHECKBOX ONCLICK="document.all.address.fieldset.disabled = !this.checked;"> <BR> <FIELDSET NAME="address" DISABLED> <LEGEND>Address Information</LEGEND> <LABEL FOR="email">E-Mail Address:</LABEL> <INPUT TYPE=TEXT NAME="email"> <LABEL FOR="snailMail">Street Address:</LABEL> <TEXTAREA ROWS=3 COLS=40></TEXTAREA> </FIELDSET> </FORM> </BODY> </HTML>
The quickest and easiest way to enable and disable a group of fields is to use the Fieldset element. When a fieldset is disabled, all the contents appear grayed.
NOTE: There is currently no technique you can use to override the default rendering for disabled controls.
The Indeterminate State
Check boxes support an indeterminate state, which allows a check box to represent three states: on, off, and unknown. For example, suppose you use a check box to indicate whether selected text is boldface. The unknown state would apply when the user selects some text that is part boldface and part not boldface. The unknown state can be set only through the object model, using the indeterminate property on the check box. The indeterminate property is a Boolean value—when this property is set to true, the check box is displayed in the indeterminate state.
The checked property of an indeterminate check box returns the value of the check box before it became indeterminate, even though an indeterminate check box always appears the same in the user interface. The check box is submitted depending on the checked property, regardless of whether the check box is indeterminate. Figure 10-2 shows the different check box states as displayed in Microsoft Windows:
Figure 10-2. The different check box states.
The indeterminate check box looks the same as the checked and disabled check box. The difference between the two is that you cannot click a disabled check box to change its value, but you can click an indeterminate check box.
For radio buttons and check boxes, the onclick event has a slightly different behavior than it has for other elements. The onclick event fires prior to the execution of the default action, providing the Web author an opportunity to override it. For check boxes, the default action is to select or deselect the item, and for radio buttons the default action is to select the item. When the onclick event fires for these controls, the control's value already represents the new value of the element. Canceling the default action causes the value to revert to the previous value. This process is different from other elements, for which the state of the element does not change until after the event.