Checkboxes and Radio Buttons - Page 13

I've put the discussion of checkboxes and radio buttons together, because their objects have identical properties, methods, and events. A checkbox allows the user to tick and untick 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 checkboxes, with the property that only one can be checked at once. Of course, they also look different and their group nature means that they are treated differently.

Creating checkboxes and radio buttons requires our old friend the <INPUT> tag. Its TYPE attribute is set to "checkbox" or "radio" to determine which box or button is created. To set a checkbox or a radio button to be checked when the page is loaded, we simply insert the keyword CHECKED into the <INPUT> tag. So to create a checkbox, which is already checked, our <INPUT> tag will be:

<INPUT TYPE="checkbox" NAME=chkDVD CHECKED VALUE="DVD">

To create a checked radio button the <INPUT> tag would be:

<INPUT TYPE="radio" NAME=radCPUSpeed CHECKED VALUE="1 GHz">

I mentioned above that radio buttons are group elements. In fact, there is little point in putting just one on a page as the user won't be able to choose between any alternative boxes.

To create a group of radio buttons we simply give each radio button the same NAME. This creates an array of radio buttons going by that name which we can access, as we would with any array, using its index.

For example, to create a group of three radio buttons, our HTML would be:

<INPUT TYPE="radio" NAME=radCPUSpeed CHECKED VALUE="800 MHz">
<INPUT TYPE="radio" NAME=radCPUSpeed VALUE="1 GHz">
<INPUT TYPE="radio" NAME=radCPUSpeed VALUE="1.5 GHz">

We can have as many groups of radio buttons in a form as we want, by just giving each group their own unique name. Note that we have only used one CHECKED attribute, since only one of the radio buttons in the group can be checked. If we 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 checkbox and radio button elements is different from previous elements we've looked at. Firstly it tells you nothing about the user’s interaction with an element, as it's predefined in our HTML or by our JavaScript. Whether a checkbox or radio button is checked or not, it still returns the same value. Secondly, when a form is posted to a server, only the values of the checked checkboxes and radio buttons are sent. So, if you have a form with 10 checkboxes on and the user submits the form with none of these checked, then nothing would be sent to the server except a blank form. We'll learn more about this when we look at server-side scripting.

Each checkbox has an associated Checkbox object and each radio button in a group has a separate Radio object. As mentioned above, with radio buttons of the same name, we 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, we have the length property, which will tell us how many radio buttons there are in that group.

For determining whether a user has actually checked or unchecked a checkbox, we need to use the checked property of the Checkbox object. This property returns true if the checkbox is currently checked, and false if not.

Radio buttons are slightly different. Because radio buttons with the same name are grouped together, we 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 event handlers, onclick, onfocus, and onblur, and these operate as we saw for the other elements.

Try It Out: Event Watching - Page 12
Beginning JavaScript
Try It Out: Checkboxes and Radio Buttons - Page 14