Java Reference
In-Depth Information
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, because 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 buttons, 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 predefined 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.
Note
There actually aren't objects called
Checkbox
and
Radio
. All
<input />
elements create an object of type
HtmlInputElement
. But for the sake of clarity,
this text uses
Checkbox
and
Radio
to make explanations easier to follow and
understand.
For determining whether a user has actually checked or unchecked a check box, you need to use the
checked
property of the
Checkbox
object. This property returns
true
if the check box is currently
checked and
false
if not.
Radio buttons are slightly different. Because radio buttons with the same name are grouped
together, you need to test each
Radio
object in the group in turn to see if it has been checked. Only
one of the radio buttons in a group can be checked, so if you check another one in the group, the
previously checked one will become unchecked, and the new one will be checked in its place.
Both
Checkbox
and
Radio
have the
click
,
focus
, and
blur
events, and these operate identically to
the other elements, although they can also be used to cancel the default action, such as clicking the
check box or radio button.
Scripting check box and radio buttons usually automatically adds extra stuff to your code—
namely loops because you are working with multiple, near‐identical elements. The next example
demonstrates this.
Check Boxes and radio Buttons
trY it out
Let's look at an example that makes use of all the properties, methods, and events we have just
discussed. The example is a simple form that enables a user to build a computer system. Perhaps it
