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
/>

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.

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.

<script type="text/javascript">

function ShowValue()
{
  for (i=0; i < document.all.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="Item 1"/>This is Item 1<br/>
<input type="radio" id="Radio1" name="RadioSet" value="Item 2"/>This is Item 2<br/>
<input type="radio" id="Radio2" name="RadioSet"/>This is Item 3<br/>

<input type="button" value="Show Value" onclick="ShowValue()"/>
<span id="RadioValue"></span>

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

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). Since the loop is based on the length of the named group, reference to this group is through the notation

document.all.RadioSet.length

where document.all references the collection of all controls on the page, and RadioSet points to a named control within this collection. The standard notation document.getElementById("id") is not applicable since an id is not being used to identify the iterated group. Note, however, that the for loop could have been set up to iterate the button ids with

for (i=0; i < 3; i++)

using the actual number of buttons in the group rather than a reference to its length property. The length is a property only of a named group.

Inside the loop, buttons are identified individually through their ids. These ids are composed by concatenating ("Radio" + i) to iterate buttons "Radio0", "Radio1", and "Radio2".

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,

if (document.getElementById("Radio" + i).checked == true)

Alternately, the shorthand test

if (document.getElementById("Radio" + i).checked)

can be applied. If the button is checked, then its value is reported and the loop is exited. 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.

<script type="text/javascript">

function SetFont(Font)
{
  document.body.style.fontFamily = Font;
}
function SetSize(Size)
{
  document.body.style.fontSize = Size;
}
function SetColor(Color)
{
  document.body.style.color = Color;
}

</script>

<h3>Set Page Font</h3>
<table border="0">
<tr style="vertical-align:top">
  <td>
    <b>Family:</b><br/>
    <input type="radio" name="Family" value="Arial"           
      onclick="SetFont(this.value)" checked/>Arial<br/>
    <input type="radio" name="Family" value="Courier New"     
      onclick="SetFont(this.value)"/>Courier New<br/>
    <input type="radio" name="Family" value="Comic Sans MS"   
      onclick="SetFont(this.value)"/>Comic Sans MS<br/>
    <input type="radio" name="Family" value="Georgia"         
      onclick="SetFont(this.value)"/>Georgia<br/>
    <input type="radio" name="Family" value="Times New Roman" 
      onclick="SetFont(this.value)"/>Times New Roman<br/>
    <input type="radio" name="Family" value="Verdana"         
      onclick="SetFont(this.value)"/>Verdana<br/>
  </td>
  <td>
    <b>Size:</b><br/>
    <input type="radio" name="Size" value="8pt"  
      onclick="SetSize(this.value)"/>8pt<br/>
    <input type="radio" name="Size" value="9pt"  
      onclick="SetSize(this.value)"/>9pt<br/>
    <input type="radio" name="Size" value="10pt" 
      onclick="SetSize(this.value)" checked/>10pt<br/>
    <input type="radio" name="Size" value="12pt" 
      onclick="SetSize(this.value)"/>12pt<br/>
    <input type="radio" name="Size" value="14pt" 
      onclick="SetSize(this.value)"/>14pt<br/>
  </td>
  <td>
    <b>Color:</b><br/>
    <input type="radio" name="Color" value="Black"  
      onclick="SetColor(this.value)" checked/>Black<br/>
    <input type="radio" name="Color" value="Blue"   
      onclick="SetColor(this.value)"/>Blue<br/>
    <input type="radio" name="Color" value="Brown"  
      onclick="SetColor(this.value)"/>Brown<br/>
    <input type="radio" name="Color" value="Green"  
      onclick="SetColor(this.value)"/>Green<br/>
    <input type="radio" name="Color" value="Orange" 
      onclick="SetColor(this.value)"/>Orange<br/>
    <input type="radio" name="Color" value="Red"    
      onclick="SetColor(this.value)"/>Red<br/>
  </td>
</tr>
</table>

On a button click, the SetFont(), SetSize(), or SetColor() function is called, passing along a reference to the value of the clicked button. It is not necessary to iterate the buttons to locate the one that is checked, nor is it necessary to assign ids to the buttons.

The checked attribute is assigned to one of the buttons in the groups to pre-check it for the default page setting. Since this button is pre-checked, the setting cannot be applied until after choosing a different button. The onclick handler tests for a change in selection to a different button, much like the onchange handler works for a textbox.

Of course, if onclick handers are not coded for a set of buttons, then the buttons must be iterated to find the one that is checked. The following rewrite of the previous application requires these iterations, along with id values to identify individual buttons in the groups.

<script type="text/javascript">

function SetFont()
{
  for (i=0; i < document.all.FontSet.length; i++) {
    if (document.getElementById("Font" + i).checked) {
      document.body.style.fontFamily = 
        document.getElementById("Font" + i).value;
      break;
    }
  }
  
  for (i=0; i < document.all.SizeSet.length; i++) {
    if (document.getElementById("Size" + i).checked) {
      document.body.style.fontSize = 
        document.getElementById("Size" + i).value;
      break;
    }
  }
  
  for (i=0; i < document.all.ColorSet.length; i++) {
    if (document.getElementById("Color" + i).checked) {
      document.body.style.color = 
        document.getElementById("Color" + i).value;
      break;
    }
  }
}

</script>

<h3>Set Page Font</h3>
<table border="0">
<tr style="vertical-align:top">
  <td>
<b>Family:</b><br/>
<input type="radio" id="Font0" name="FontSet" value="Arial"           />Arial<br/>
<input type="radio" id="Font1" name="FontSet" value="Courier New"     />Courier New<br/>
<input type="radio" id="Font2" name="FontSet" value="Comic Sans MS"   />Comic Sans MS<br/>
<input type="radio" id="Font3" name="FontSet" value="Georgia"         />Georgia<br/>
<input type="radio" id="Font4" name="FontSet" value="Times New Roman" />Times New Roman<br/>
<input type="radio" id="Font5" name="FontSet" value="Verdana"         />Verdana<br/>
  </td>
  <td>
<b>Size:</b><br/>
<input type="radio" id="Size0" name="SizeSet" value="8pt"  />8pt<br/>
<input type="radio" id="Size1" name="SizeSet" value="9pt"  />9pt<br/>
<input type="radio" id="Size2" name="SizeSet" value="10pt" />10pt<br/>
<input type="radio" id="Size3" name="SizeSet" value="12pt" />12pt<br/>
<input type="radio" id="Size4" name="SizeSet" value="14pt" />14pt<br/>
  </td>
  <td>
<b>Color:</b><br/>
<input type="radio" id="Color0" name="ColorSet" value="Black"  />Black<br/>
<input type="radio" id="Color1" name="ColorSet" value="Blue"   />Blue<br/>
<input type="radio" id="Color2" name="ColorSet" value="Brown"  />Brown<br/>
<input type="radio" id="Color3" name="ColorSet" value="Green"  />Green<br/>
<input type="radio" id="Color4" name="ColorSet" value="Orange" />Orange<br/>
<input type="radio" id="Color5" name="ColorSet" value="Red"    />Red<br/>
  </td>
</tr>
</table>

<input type="button" value="Set Font" onclick="SetFont()"/>