MGA Logo

Web Development Tutorials



  
  

Radio Buttons

Radio buttons are created with <input type="radio"> tags. The buttons provide mutually exclusive choices, only one of which can be selected. The general format for the <input type="radio"> tag is shown below.


<input type="radio"
  id="id"
  name="name"
  value="string" checked />

Figure 9-19. General format for a radio button.

To enforce a single choice, each button in a group must be assigned the same name. The data value associated with a radio button is provided in a value attribute. A radio button can be pre-checked by coding its checked attribute.

The following table lists selected properties and event handlers associated with radio buttons.

Property Description
length The number of radio buttons with the same name.
checked A true or false value indicating whether a button is checked.
status A true or false value indicating whether a button is checked.
value The value attribute coded for a button. A checked button with no assigned value is given a value of "on".
Event Handler Description
onfocus The control gains focus.
onblur The control loses focus.
onclick The button is clicked.

Figure 9-20. Selected properties and event handlers for a radio button.

Determining Radio Button Choices

Processing of radio buttons usually involves determining which button is checked and determining its value. In the example below, checking a radio button and then clicking the "Show Value" button displays the value of the checked button.

Radio Buttons:
 This is Item 1
 This is Item 2
 This is Item 3

Figure 9-21. Determining the value of a checked radio button.


<script type="text/javascript">
window.onload = init;

function init()
{
   var btnShowValue = document.getElementById("btnShowValue");
   btnShowValue.onclick = showValue;
}

function showValue()
{
   for (i=0; i < document.getElementsByName("radioSet").length; i++) {
      if (document.getElementById("radio" + i).checked == true) {
         document.getElementById("radioValue").innerHTML = 
         "</b>The value is: </b>" + document.getElementById("radio" + i).value;
         break;
      }
  }
}
</script>

<b>Radio Buttons:</b><br>
<input type="radio" id="radio0" name="radioSet" value="item1"> This is Item 1<br>
<input type="radio" id="radio1" name="radioSet" value="item2"> This is Item 2<br>
<input type="radio" id="radio2" name="radioSet"> This is Item 3<br>

<input type="button" id="btnShowValue" value="Show Value" >
<span id="radioValue"></span>

Listing 9-15. Code to determine the value of a checked radio button.

All radio buttons in the set are assigned the same name to make them mutually exclusive choices or to make them a group of related radio buttons; that is, only one button in the group can be checked. The first two buttons in the group are assigned value. The last button does not have an explicit value.

With radio button's it is necessary to iterate all radio buttons in a group to determine which one is checked. The loop runs from 0 (the index of the first radio button) to one less than the number of buttons in the group, given by the length property of the group (the number of radio buttons with the same name). 


document.getElementsByName("radioSet").length

where getElementsByName("radioSet") references the collection of all radio button controls with the nameradioSet. document.getElementById("id") is not applicable since an id is not being used to identify the iterated group.

There are three conditions that can be tested on a radio button.

  • If a button is checked, its checked property is true; otherwise, false.
  • If a button is checked, its status property is true; otherwise, false.
  • If a button is checked, its value property is given by its value attribute; if no attribute is coded, its value is "on".

It is common to test the checked property of a button to determine if it is checked. This is done in the above script with the statement:


x = document.getElementsByName("radioSet");

for (i=0;i < x.length; i++)
{
   if (x[i].checked == true)
   {
      alert(x[i].value);
      break;
   }
}

Alternately, the shorthand test


x = document.getElementsByName("radioSet");

for (i=0;i < x.length; i++)
{
   if (x[i].checked)
   {
      alert(x[i].value);
      break;
   }
}

If the button is checked, then its value is reported and the loop is exited using the break statement. There is no reason to continue the loop since only one of the buttons can be checked.

Coding Event Handlers in Radio Buttons

It is not necessary to create a separate button to trigger a script to evaluate a set of radio buttons. Radio buttons respond to click events. Therefore, the button itself can call a function. In the following example, clicks on radio buttons change the page font, text size, and color through onclick event handlers.

Set Page Font

Family:
Arial
Courier New
Comic Sans MS
Georgia
Times New Roman
Verdana
 Size:
8pt
9pt
10pt
12pt
14pt
 Color:
Black
Blue
Brown
Green
Orange
Red

Figure 9-22. Using a radio button's click event.


<script type="text/javascript">
window.onload = init;

function init()
{
   var x = document.getElementsByName("family");
   var y = document.getElementsByName("size");
   var z = document.getElementsByName("color");

   for (i = 0; i<x.length; i++)
   {
      x[i].onclick = setFont;
   }

   for (i = 0; i<y.length; i++)
   {
      y[i].onclick = setSize;
   }

   for (i = 0; i<z.length; i++)
   {
      z[i].onclick = setColor;
   }
}

function setFont()
{
   document.body.style.fontFamily=this.value;
}

function setSize()
{
   document.body.style.fontSize=this.value;
}

function setColor()
{
   document.body.style.color=this.value;
}
</script>

<h4>Set Page Font</h4>
<table>
<tr>
  <td>
    <b>Family:</b><br>
    <input type="radio" name="family" value="Arial" checked>Arial<br>
    <input type="radio" name="family" value="Courier New">Courier New<br>
    <input type="radio" name="family" value="Comic Sans MS">Comic Sans MS<br>
    <input type="radio" name="family" value="Georgia">Georgia<br>
    <input type="radio" name="family" value="Times New Roman">Times New Roman<br>
    <input type="radio" name="family" value="Verdana">Verdana<br>
  </td>
  <td>
    <b>Size:</b><br>
    <input type="radio" name="size" value="8pt">8pt<br>
    <input type="radio" name="size" value="9pt">9pt<br>
    <input type="radio" name="size" value="10pt" checked>10pt<br>
    <input type="radio" name="size" value="12pt">12pt<br>
    <input type="radio" name="size" value="14pt">14pt<br>
  </td>
  <td>
    <b>Color:</b><br>
    <input type="radio" name="color" value="Black" checked>Black<br>
    <input type="radio" name="color" value="Blue">Blue<br>
    <input type="radio" name="color" value="Brown">Brown<br>
    <input type="radio" name="color" value="Green">Green<br>
    <input type="radio" name="color" value="Orange">Orange<br>
    <input type="radio" name="color" value="Red">Red<br>
  </td>
</tr>
</table>

Listing 9-16. Code to respond to a radio button's click event.

When the page loads, a reference to each of the radio button groups is created. For example, the variables x,y, and z are referenced to as reference variables whose value is the collection of values associated with the respective radio button group. Since each radio button cannot have the same id value, document.getElementsByName() is used to reference the radio button groups by the common name they share. Unlike document.getElementById() which references a single object and stores a scalar value, document.getElementsByName, contains a collection or array of the radio button group values.

Next, the for loop is used to iterate through each of the radio button groups to determine when one of the options from each group is clicked. When an option is clicked, the specified function is called.

Finally, each function uses the document.body.style to change the font size, font color, or font family of all the page text based on the value associated with the radio button option that is clicked. The body property of the document object is a shorthand property that sets or returns the current document's body. This includes all content coded within the page's <body> tag.



TOP | NEXT: Checkboxes