Home

Web Control: The Radio Button
 

Radio Button Fundamentals
 

Introduction

A radio button is a control that present a round object. Normally, a radio is usually accompanied by other radio buttons, which considers them a group. There are various ways you can create a group of radios buttons.
 

Creating a Radio Button

To support radio buttons, the .NET Framework provides the RadioButton control. This control is implemented by the RadioButton class defined in the System.Web.UI.WebControls namespace.

To visually create a radio control, from the Standard section of the Toolbox, drag a RadioButton and drop it on the form. To manually create a radio button, create an asp:RadioButton tag.

Normally a radio button is usually accompanied by at one other. This means that, when creating radio buttons, unless you have a very good reason, you should always create at least two of them. Here is an example with 3 radio buttons:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>
 
<form id="frmExercise" method="post" runat="server">
  <asp:RadioButton id="rdoButton1" runat="server"></asp:RadioButton>
  <asp:RadioButton id="rdoButton2" runat="server"></asp:RadioButton>
  <asp:RadioButton id="rdoButton3" runat="server"></asp:RadioButton>
</form>

</body>
</html>

Characteristics of Radio Buttons
 

The Caption of a Radio Button

The above code would produce:

Web Controls: Radio Button

Notice how vague the result is. To identify what a radio button is used for, it should be accompanied by a label. To support this, the <asp:RadioButton> tag is equipped with an attribute named Text to which you can assign a string. Here are examples:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>
 
<form id="frmExercise" method="post" runat="server">
  <asp:RadioButton id="rdoTeen" Text="Teen" runat="server" />
  <asp:RadioButton id="rdoAdult" Text="Adult" runat="server" />
  <asp:RadioButton id="rdoSenior" Text="Senior" runat="server" />
</form>

</body>
</html>

This would produce:

Radio Buttons

Notice that the controls are aligned. If you want them to align them vertically, you have various options. You can create a list and put each radio button in a list item. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>
 
<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:RadioButton id="rdoTeen" Text="Teen" runat="server" /></li>
    <li><asp:RadioButton id="rdoAdult" Text="Adult" runat="server" /></li>
    <li><asp:RadioButton id="rdoSenior" Text="Senior" runat="server" /></li>
  </ul>
</form>

</body>
</html>

This would produce:

Radio Buttons

Another solution is to include the radio buttons in a table, with each radio button in a table. Remember that:

  • You can create a table manually, using the <table> tag
  • If you are using Microsoft Visual Studio or Microsoft Visual Web Developer, on the main menu, you can click Table -> Insert Table
  • From the Standard section of the Toolbox, you can drag a Table object and drop it on the form
  • From the HTML section of the Toolbox, you can drag a Table  object and drop it on the form

The Caption Alignment of a Radio Button

By default, the caption of a radio button is positioned on the right side of the round box. This characteristic is controlled by the TextAlign attribute. Its default value is Right. If you want the caption to be positioned on the left side, assign Left to this attribute. Normally, you should specify the same value for each radio button of the same group. Here are examples:

<%@ Page Language="C#" %>
<html>
<head>

<title>Exercise</title>
</head>
<body>
 
<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:RadioButton id="rdoTeen"
                         Text="Teen"
			 TextAlign="Left"
			 runat="server" /></li>
    <li><asp:RadioButton id="rdoAdult"
			 Text="Adult"
			 TextAlign="Left"
			 runat="server" /></li>
    <li><asp:RadioButton id="rdoSenior"
			 Text="Senior"
			 TextAlign="Left"
			 runat="server" /></li>
  </ul>
</form>

</body>
</html>

This would produce:

Radio Button

 
 
 
 

Checking a Radio Button

At design time, if you want a radio button to show a clicked state by default, set the value of its Boolean Checked state. By default, it is set to False. If you want the radio button to be checked by default, set this value to True. Here is an example:

<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:RadioButton id="rdoTeen" Text="Teen" runat="server" /></li>
    <li><asp:RadioButton id="rdoAdult"
			 Text="Adult"
			 Checked="True"
                         runat="server" /></li>
    <li><asp:RadioButton id="rdoSenior" Text="Senior" runat="server" /></li>
  </ul>
</form>

Clicking a Radio Button

To use a radio button, a web page visitor can click one in a group. When a radio button has been clicked, its round button may receive a black round box in it. If the user clicks another radio button of the same group, that newly clicked button should receive the black round box and the previous one should lose it. This means that the radio button that was previous checked should have its checked state changed, the newly clicked button also.

When the checked state of a radio button has changed, the control fires an event called CheckedChanged. This event is of type EventArgs class, which means there is no more information than to know that the control was clicked.

To visually implement this event, click the control on the form and, in the Events section of the Properties window, double-click CheckedChange. This event is handled by the OnCheckedChanged attribute. To manually implement this event, create a method that is passed an Object and an EventArgs arguments. In the asp:RadioButton tag, add the OnCheckedChanged attribute and assign the name of the method to it. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<script runat="server">
private void AdultButtonClicked(Object sender, EventArgs e)
{
}
</script>

<title>Exercise</title>
</head>
<body>
 
<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:RadioButton id="rdoTeen" Text="Teen" runat="server" /></li>
    <li><asp:RadioButton id="rdoAdult" Text="Adult" Checked="True"
	                 OnCheckedChanged="AdultButtonClicked"
                         runat="server" /></li>
    <li><asp:RadioButton id="rdoSenior" Text="Senior" runat="server" /></li>
  </ul>
</form>

</body>
</html>

Although we implemented an event for only one radio button, if you want, you can create an event for each radio button of the group.

The Group Name of a Radio Button

The code we have used so far to create the radio buttons would produce:

Radio Buttons

Notice that all radio buttons are checked. This should never be the case for all radio buttons of the same group because it deceives the purpose of mutually-exclusive selection. To solve this problem, you can create a name and assign it to each radio button of the same group. To support this, the <asp:RadioButton> tag is equipped with an attribute named GroupName, to which you can assign a name. Here are examples:

<%@ Page Language="C#" %>
<html>
<head>

<script runat="server">
private void AdultButtonClicked(Object sender, EventArgs e)
{
}
</script>

<title>Exercise</title>
</head>
<body>
 
<form id="frmExercise" method="post" runat="server">
  <ul style="list-style-type: none;">
    <li><asp:RadioButton id="rdoTeen"
  			 Text="Teen"
			 GroupName="Membership"
			 runat="server" /></li>
    <li><asp:RadioButton id="rdoAdult"
			 Text="Adult"
			 GroupName="Membership"
	                 OnCheckedChanged="AdultButtonClicked"
                         runat="server" /></li>
    <li><asp:RadioButton id="rdoSenior"
			 Text="Senior"
			 GroupName="Membership"
			 runat="server" /></li>
  </ul>
</form>

</body>
</html>

This time, when a user clicks a radio button, that button receives focus and is checked; no other radio button of the same group should be checked.

Automatically Posting Back

When a radio button has been clicked, if you want the result to be posted to the server, set its AutoPostBack Boolean attribute accordingly. By default, its value is set to "False". If you want to change it, type this attribute and assign "True" to it. You can do this for each radio button of the group.
 
 
   
 
Home Copyright © 2009-2016, FunctionX, Inc.