• Choose a category
• All
• Classic-Fiction

The most important thing to remember about radio buttons is that, like wildebeests and power-walkers, they must be in groups. Each group of radio buttons has only one button active. The group should be set up so that one button is always active.

You specify the radio button group in the XHTML code. Each element of the group can have an id (although the IDs aren’t really necessary in this application). What’s more important here is the name attribute. Look over the code, and you’ll notice something interesting. All the radio buttons have the same name!

With what weapon will you fight the dragon?

Using a name attribute when everything else has an id seems a little odd, but you do it for a good reason. The name attribute is used to indicate the group of radio buttons. Because all the buttons in this group have the same name, they’re related, and only one of them will be selected.

The browser recognizes this behavior and automatically unselects the other buttons in the group whenever one is selected.

I added a label to describe what each radio button means.

You need to preset one of the radio buttons to true with the checked = “checked” attribute. If you fail to do so, you have to add code to account for the possibility that there is no answer at all.

Interpreting radio buttons

Getting information from a group of radio buttons requires a slightly different technique than most of the form elements. Unlike the select object, there is no container object that can return a simple value. You also can’t just go through every radio button on the page because you may have more than one group. (Imagine a page with a multiple-choice test.)

This issue is where the name attribute comes in. Although ids must be unique, multiple elements on a page can have the same name. If they do, you can treat these elements as an array.

Look over the code to see how it works:

This code looks much like all the other code in this chapter, but it has a sneaky difference:

♦ It uses getElementsByName to retrieve an array of elements with this name. Now that you’re comfortable with getElementById, I throw a monkey wrench in the works. Note that it’s plural — getElementsByName — because this tool is used to extract an array of elements. It returns an array of elements. (In this case, all the radio buttons in the weapon group.)

♦ It treats the result as an array. The resulting variable (weapon in this example) is an array. As usual, the most common thing to do with arrays is process them with loops. Use a for loop to step through each element in the array.

♦ Assign each element of the array to currentWeapon. This variable holds a reference to the current radio button.

♦ Check to see whether the current weapon is checked. The checked property indicates whether any radio button is checked.

♦ If so, retain the value