The <asp:RadioButton> control is a method for user input that presents clickable choices. A RadioButton control creates a single radio button. Multiple buttons can be grouped together for a mutually exclusive choice from the group. A typical group of radio buttons is shown below. Clicking the "Select" button reports the choice made.

Format for RadioButton Control

The general format for the <asp:RadioButton> control is shown below. As many RadioButton controls are created as there are buttons to display.

<asp:RadioButton id="id" Runat="Server"
  AutoPostBack="False|True"
  Checked="False|True"
  GroupName="name"
  Text="string"
  TextAlign="Left|Right"
  
    property="value"...
  
    OnCheckedChanged="subprogram"
/>

The Text attribute provides a label for the button; the TextAlign attribute places the label to the Right (default) or Left of the button. A button can be prechecked by specifying Checked="True". A RadioButton has no assigned value. A script only determines if the button is checked or not by testing its Checked property. However, the button's Text property can be used as its associated value if it is necessary to pass a data item to a processing script.

A set of radio buttons is often accompanied by a Button control to call a subprogram to determine which one of the grouped buttons is clicked. Alternatively, a button itself can trigger a script by setting AutoPostBack="True" and identifying the subprogram to call in the OnCheckedChanged event handler.

Normally, radio buttons are presented as a group of mutually exclusive choices. That is, only one of the group can be checked. This setup is accomplished by assigning all buttons in the group the same GroupName property.

Scripting Radio Buttons

For scripting purposes, sets of RadioButton controls are treated as independent controls even though they coordinate their on/off status when presented as a set of mutually exclusive choices. That is, when all buttons have the same GroupName, clicking one button "on" automatically turns another button "off." However, when a script tests the Checked status of the buttons, it does so through reference to the individual buttons, not to the button group. This manner of testing buttons is shown in the following example.

<SCRIPT Runat="Server">

Sub Get_Button (Src As Object, Args As EventArgs)

  If Button1.Checked = True Then
    Message.Text = "Button 1 was checked"
  ElseIf Button2.Checked = True Then
    Message.Text = "Button 2 was checked"
  ElseIf Button3.Checked = True Then
    Message.Text = "Button 3 was checked"
  End If

End Sub

</SCRIPT>

<form Runat="Server">

<b>Choose a button:</b><br/>

<asp:RadioButton id="Button1" Runat="Server"
  Text="Button 1"
  GroupName="Buttons"
  Checked="True"/><br/>
<asp:RadioButton id="Button2" Runat="Server"
  Text="Button 2"
  GroupName="Buttons"/><br/>
<asp:RadioButton id="Button3" Runat="Server"
  Text="Button 3"
  GroupName="Buttons"/><br/><br/>
	
<asp:Button Text="Select" OnClick="Get_Button" Runat="Server"/>
<asp:Label id="Message" Runat="Server"/>

</form>

The radio buttons are grouped for a mutually exclusive choice by assigning them the same GroupName="Buttons". Still, they must be tested individually to see if they are checked. The subprogram determines if a button is checked by testing its Checked property.

The following example modifies the previous rectangle-creation script to permit a choice of color for the background of the rectangle. This choice is given in a set of three RadioButtons.

<%@ Import Namespace="System.Drawing" %>

<SCRIPT Runat="Server">

Sub Make_Rectangle (Src As Object, Args As EventArgs)
  
  If IsNumeric(Width.Text) AND IsNumeric(Height.Text) Then
    
    Area.Text = FormatNumber(Width.Text * Height.Text, 0)
    
    Rectangle.Width = Unit.Parse(Width.Text)
    Rectangle.Height = Unit.Parse(Height.Text)
    Rectangle.BorderStyle = BorderStyle.Solid
    Rectangle.BorderWidth = Unit.Parse("1px")
    
    If RedButton.Checked = True Then
      Rectangle.BackColor = Color.FromName("#FF0000")
    ElseIf GreenButton.Checked = True Then
      Rectangle.BackColor = Color.FromName("#00FF00")
    ElseIf BlueButton.Checked = True Then
      Rectangle.BackColor = Color.FromName("#0000FF")
    End If
    
  End If

End Sub

</SCRIPT>

<form Runat="Server">

<h3>Make a Rectangle</h3>

<table border="0" cellpadding="0">
<tr>
  <th colspan="2">Width</th>
  <th>Height</th>
  <th>Color</th>
  <th></th>
  <th>Area</th>
</tr>
<tr>
  <td><asp:TextBox id="Width" Runat="Server"
      Columns="1"
      MaxLength="3"
      Text="100"
      Style="text-align:right"/>
  </td>
  <td> x </td>
  <td><asp:TextBox id="Height" Runat="Server"
      Columns="1"
      MaxLength="3"
      Text="100"
      Style="text-align:right"/>
  </td>
  <td><asp:RadioButton id="RedButton" Runat="Server"
        GroupName="Color"
        Text="Red"/><br>
      <asp:RadioButton id="GreenButton" Runat="Server"
        GroupName="Color"
        Text="Green"/><br>
      <asp:RadioButton id="BlueButton" Runat="Server"
        GroupName="Color"
        Text="Blue"/>
  </td>
  <td><asp:Button Runat="Server" 
      Text=" = "
      OnClick="Make_Rectangle"/> 
  </td>
  <td><asp:TextBox id="Area" Runat="Server"
      Columns="3"
      ReadOnly="True"
      Style="text-align:right"/>
  </td>
</tr>
</table>

<p><asp:Panel id="Rectangle" Runat="Server"/></p>

</form>

This script is a continuation of the previous script to create a rectangle. Here, code is added to check whether a radio button is clicked and, if so, to set the background color of the rectangle to the color associated with the button.

Since the Text labels for the above radio buttons are valid XHTML color names—Red, Green, Blue—these labels can be assigned as color values for the background color of the rectangle. A script alternative, then, is to assign the checked button's Text property as the background color.

If RedButton.Checked = True Then
  Rectangle.BackColor = Color.FromName(RedButton.Text)
ElseIf GreenButton.Checked = True Then
  Rectangle.BackColor = Color.FromName(GreenButton.Text)
ElseIf BlueButton.Checked = True Then
  Rectangle.BackColor = Color.FromName(BlueButton.Text)
End If

Automatic Post-Back

It is often the case that a standard button is supplied to call a subprogram to evaluate checked radio buttons. You can, though, make the radio buttons themselves the triggers for subprogram calls. By coding AutoPostBack="True" and by naming a subprogram in the OnCheckedChanged property, a RadioButton can call a subprogram when it is clicked. More accurately, the subprogram is called when an "off" button is checked "on."

Below is a simple example of a set of radio buttons, each of which calls the same subprogram when clicked.

Code for this application is shown below. The subprogram uses the Text property of the clicked button in reporting which button is clicked. It is not necessary to assign ids to the buttons. They are self-identified through the Src parameter in the argument list. Note that the signature of the subprogram is the same as for a standard button.

<SCRIPT Runat="Server">

Sub Get_Checked_Button (Src As Object, Args as EventArgs)

  WhichButton.Text = "You checked the <b>" & Src.Text & "</b>"
	
End Sub

</SCRIPT>

<form Runat="Server">

<h4>Pick a Button</>

<asp:RadioButton Runat="Server"
  GroupName="ButtonGroup"
  Text="First Button"
  AutoPostBack="True"
  OnCheckedChanged="Get_Checked_Button"/><br/>

<asp:RadioButton Runat="Server"
  GroupName="ButtonGroup"
  Text="Second Button"
  AutoPostBack="True"
  OnCheckedChanged="Get_Checked_Button"/><br/>

<asp:RadioButton Runat="Server"
  GroupName="ButtonGroup"
  Text="Third Button"
  AutoPostBack="True"
  OnCheckedChanged="Get_Checked_Button"/><br/>
<br/>
<asp:Label id="WhichButton" Runat="Server"/>

</form>

Whether you use the button click itself to call a subprogram or use a separate Button control for a two-step select-and-submit process is a matter of programmer preference. Certainly, you can save the user an extra mouse click by having a RadioButton call a subprogram directly.