Using Radio Buttons
Using Radio ButtonsRadio buttons are similar to check boxes, except they only let the user select one option from a group (such as day of the week). You group radio buttons into a group by giving them the same name using their NAME attributes. (You can have more than one radio button group in a single web page.) The browser will allow only one radio button in the group to be selected at one time. Here's an example that uses radio buttons' ONCLICK attribute to display a message when you click a radio button: (Listing 12-14.html on the web site)<HTML> <HEAD> <TITLE>Using Radio Buttons</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio1Clicked() { document.form1.text1.value = "You clicked radio button 1." } function radio2Clicked() { document.form1.text1.value = "You clicked radio button 2." } function radio3Clicked() { document.form1.text1.value = "You clicked radio button 3." } function radio4Clicked() { document.form1.text1.value = "You clicked radio button 4." } function radio5Clicked() { document.form1.text1.value = "You clicked radio button 5." } // --> </SCRIPT> </HEAD> <BODY> <H1>Using Radio Buttons</H1> <FORM NAME="form1"> <TABLE BORDER BGCOLOR = CYAN WIDTH = 200> <TR><TD><INPUT TYPE="RADIO" NAME = "radios" ONCLICK = "radio1Clicked( You can see the results in Figure 12.8. Figure 12.8. Clicking a radio button. Tip You don't need a separate function for each radio button, of course. You could give each radio button a different ID value ( not a different NAME value, which must be the same for all radio buttons in a group), and then pass the current clicked radio button to the onlick handler (like this: ONCLICK="radioClicked(this)" ) and use the radio button's id property to discover which button was clicked, as well as its checked property to see whether it's been selected. Here's a more involved example. In this case, I'll use both check boxes and radio buttons to let the user make a sandwich, as you see in Figure 12.9. Here the radio buttons on the left select a prebuilt sandwich, and the check boxes on the right display the default items in the sandwich, as you see in Figure 12.9. Figure 12.9. Using check boxes and radio buttons together. When the user clicks a radio button on the left to select a prebuilt sandwich, the code sets the check boxes on the right to show what's in that sandwich. It does that first by calling a function I've named clearSettings to clear all check boxes (by setting their checked property to false), and then selecting the correct check boxes to show the ingredients of the sandwich, and finally calling a function I've named displayCost to examine what ingredient check boxes are checked and to display the corresponding cost, like this: function radio1Clicked() { clearSettings() //Clear the check boxes. document.form1.check1.checked = true //Show the items in this sandwich. document.form1.check2.checked = true document.form1.check5.checked = true displayCost() //Display total cost. } The displayCost function works by looping over all the check boxes in the form by looping over all the elements in the form's elements array and checking each element's type property to make sure it's a check box and that its checked property is true like this (this code also uses the Number object's toPrecision method to format the total cost to two decimal places; this method is available only in Netscape Navigator 6+ and Internet Explorer 5.5+): function displayCost() { var cost = 0 for (var loopIndex = 0; loopIndex < document.form1.elements.length; loopIndex++) { if(document.form1.elements[loopIndex].type=="checkbox" && document.form1.elements[loopIndex].checked){ cost += .50 } } document.getElementById("div1").innerHTML = "Total cost: $" + cost.toPrecision(3) } Tip There are other ways to set up a loop over all the check boxes in the form. For example, you could use the getElementsByTagName method to search for <INPUT> elements, and then check the elements' type property to select only check boxes. Or you could give all check boxes the same name and access them using a loop index with the elements array like this: elements[ name , loopIndex ] . (This second index is not supported in the Netscape Navigator.) Or, if you know the numeric positions of the check boxes in the form's elements array, you can just set up a loop over the check boxes using a loop index like this: elements[ loopIndex ] . Besides selecting a whole prebuilt sandwich, the user also can select (or deselect) additional check boxes to customize the sandwich. Doing so uses the check box's ONCLICK attribute to call displayCost to recalculate the sandwich's price: <INPUT TYPE="CHECKBOX" NAME="check1" ONCLICK="displayCost()"> That's it! Here's the whole code, which uses check boxes together with radio buttons, as well as these controls' ONCLICK attribute, their checked property (both to set check marks and to see what items have been checked), their type property, and the form object's elements property (Netscape Navigator 6+ and Internet Explorer 5.5+): (Listing 12-15.html on the web site) <HTML> <HEAD> <TITLE>Create your sandwich!</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio1Clicked() { clearSettings() document.form1.check1.checked = true document.form1.check2.checked = true document.form1.check5.checked = true displayCost() } function radio2Clicked() { clearSettings() document.form1.check2.checked = true document.form1.check4.checked = true displayCost() } function radio3Clicked() { clearSettings() document.form1.check1.checked = true document.form1.check2.checked = true document.form1.check3.checked = true displayCost() } function radio4Clicked() { clearSettings() document.form1.check1.checked = true document.form1.check2.checked = true document.form1.check3.checked = true document.form1.check4.checked = true displayCost() } function radio5Clicked() { clearSettings() document.form1.check1.checked = true document.form1.check2.checked = true document.form1.check3.checked = true document.form1.check4.checked = true document.form1.check5.checked = true displayCost() } function clearSettings() { for (var loopIndex = 0; loopIndex <document.form1.elements.length; You can see the results in Figure 12.9. When you click a sandwich radio button, the corresponding ingredients for the sandwich display using the check boxes. You can customize what's in a sandwich by selecting or deselecting check boxes yourself as well. Give it a try! And that's it. This example finishes our work with check boxes and radio buttons in this chapter.  |
)">Radio 1</TD></TR> 
