Java Reference
In-Depth Information
Check Boxes and Radio Buttons
The discussions of check boxes and radio buttons are together because their objects have identical prop-
erties, methods, and events. A check box enables the user to check and uncheck it. It is similar to the
paper surveys you may get where you are asked to “check the boxes that apply to you.” Radio buttons
are basically a group of check boxes where only one can be checked at a time. Of course, they also look
different, and their group nature means that they are treated differently.
Creating check boxes and radio buttons requires our old friend the <input/> element. Its type attri-
bute is set to “checkbox” or “radio” to determine which box or button is created. To set a check box
or a radio button to be checked when the page is loaded, you simply insert the attribute checked into
the <input> tag and assign its value as checked. This is handy if you want to set a default option like,
for example, those “Check this box if you want our junk mail” forms you often see on the Net, which
are usually checked by default, forcing you to uncheck them. So to create a check box that is already
checked, your <input> tag will be the following:
<input type=”checkbox” name=”chkDVD” checked=”checked” value=”DVD” />
To create a checked radio button, the <input> tag would be as follows:
<input type=”radio” name=”radCPUSpeed” checked=”checked” value=”1 GHz” />
As previously mentioned, radio buttons are group elements. In fact, there is little point in putting just
one on a page, because the user won't be able to choose between any alternative boxes.
To create a group of radio buttons, you simply give each radio button the same name. This creates an
array of radio buttons going by that name that you can access, as you would with any array, using its
index.
For example, to create a group of three radio buttons, your HTML would be as follows:
<input type=”radio” name=”radCPUSpeed” checked=”checked” value=”800 MHz” />
<input type=”radio” name=”radCPUSpeed” value=”1 GHz” />
<input type=”radio” name=”radCPUSpeed” value=”1.5 GHz” />
You can put as many groups of radio buttons in a form as you want, by just giving each group its own
unique name. Note that you have only used one checked attribute, since only one of the radio buttons
in the group can be checked. If you had used the checked attribute in more than one of the radio but-
tons, only the last of these would have actually been checked.
Using the value attribute of the check box and radio button elements is not the same as with previous
elements you've looked at. It tells you nothing about the user's interaction with an element because it's
predefi ned in your HTML or by your JavaScript. Whether a check box or radio button is checked or not,
it still returns the same value.
Each check box has an associated Checkbox object, and each radio button in a group has a separate
Radio object. As mentioned earlier, with radio buttons of the same name you can access each Radio
object in a group by treating the group of radio buttons as an array, with the name of the array being
the name of the radio buttons in the group. As with any array, you have the length property, which
will tell you how many radio buttons are in the group.
