ASP.NET RadioButton Control


Radio button allows the user to choose only one of a predefined set of options. When a user clicks on a radio button, it becomes checked, and all other radio buttons with same group become unchecked. The buttons are grouped logically if they all share the same GroupName property.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Drawing;
using System.Web.UI.WebControls;

namespace asptutorial
{
    public partial class blankpage : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            RadioButton1.Text = "HTML";
            RadioButton2.Text = "CSS";
            RadioButton3.Text = "ASP.NET";
            RadioButton4.Text = "C#";

            RadioButton1.GroupName = "radiobutton";
            RadioButton2.GroupName = "radiobutton";
            RadioButton3.GroupName = "radiobutton";
            RadioButton4.GroupName = "radiobutton";
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if (RadioButton1.Checked == true)
            {
                Label1.Text = "You selected : HTML";
            }
            else if (RadioButton2.Checked == true)
            {
                Label1.Text = "You selected : CSS";
            }
            else if (RadioButton3.Checked == true)
            {
                Label1.Text = "You selected : ASP.NET";
            }
            else if (RadioButton4.Checked == true)
            {
                Label1.Text = "You selected : C#";
            }
        } 
    }
}

HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> RadioButton Control </title>
</head>
<body>
   
        <form runat="server">
        <asp:RadioButton ID="RadioButton1" runat="server" />
        <br />
        <asp:RadioButton ID="RadioButton2" runat="server" />
        <br />
        <asp:RadioButton ID="RadioButton3" runat="server" />
        <br />
        <asp:RadioButton ID="RadioButton4" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </form>
   
</body>
</html>

Properties

Property Description
AutoPostBack A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false
Checked A Boolean value that specifies whether the radio button is checked or not
id A unique id for the control
GroupName The name of the group to which this radio button belongs
OnCheckedChanged The name of the function to be executed when the Checked property has changed
runat Specifies that the control is a server control.  Must be set to "server"
Text The text next to the radio button
TextAlign On which side of the radio button the text should appear (right or left)

ASP.NET Control Standard Properties

AppRelativeTemplateSourceDirectory, BindingContainer, ClientID, Controls, EnableTheming, EnableViewState, ID, NamingContainer, Page, Parent, Site, TemplateControl, TemplateSourceDirectory, UniqueID, Visible
For a full description, go to Web Control Standard Attributes.

ASP.NET Web Control Standard Properties

AccessKey, Attributes, BackColor, BorderColor, BorderStyle, BorderWidth, CssClass, Enabled, Font, EnableTheming, ForeColor, Height, IsEnabled, SkinID, Style, TabIndex, ToolTip, Width
For a full description, go to Web Control Standard Attributes.

Example of RadioButton Control

Declare three RadioButton controls, one Button control, and one Label control in an .aspx file.

When the Check button is triggered, the submit subroutine is executed. The submit subroutine may respond in four ways:

  • If the radiobutton1 is selected, the server sends the message "RadioButton1 selected" to the Label control.
  • If the radiobutton2 is selected, the server sends the message "RadioButton2 selected" to the Label control.
  • If the radiobutton3 is selected, the server sends the message "Radiobutton3 selected" to the Label control
  • If the radiobutton3 is selected, the server sends the message "Radiobutton3 selected" to the Label control.
  • If the radiobutton4 is selected, the server sends the message "RadioButton4 selected" to the Label control.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Drawing;
using System.Web.UI.WebControls;

namespace asptutorial
{
    public partial class blankpage : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            RadioButton1.Text = "RadioButton1";
            RadioButton2.Text = "RadioButton2";
            RadioButton3.Text = "RadioButton3";
            RadioButton4.Text = "RadioButton4";

            RadioButton1.GroupName = "radiobutton";
            RadioButton2.GroupName = "radiobutton";
            RadioButton3.GroupName = "radiobutton";
            RadioButton4.GroupName = "radiobutton";
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if (RadioButton1.Checked == true)
            {
                Label1.Text = "You selected : RadioButton1";
            }
            else if (RadioButton2.Checked == true)
            {
                Label1.Text = "You selected : RadioButton2";
            }
            else if (RadioButton3.Checked == true)
            {
                Label1.Text = "You selected : RadioButton3";
            }
            else if (RadioButton4.Checked == true)
            {
                Label1.Text = "You selected : RadioButton4";
            }
        } 
    }
}

HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> RadioButton Control </title>
</head>
<body>
   
        <form runat="server">
        <asp:RadioButton ID="RadioButton1" runat="server" />
        <br />
        <asp:RadioButton ID="RadioButton2" runat="server" />
        <br />
        <asp:RadioButton ID="RadioButton3" runat="server" />
        <br />
        <asp:RadioButton ID="RadioButton4" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </form>
   
</body>
</html>

RadioButton Control using JavaScript in HTML Code

<script  runat="server">
Sub submit(Sender As Object, e As EventArgs)
if RadioButton1.Checked then
   Label1.Text="You selected " & RadioButton1.Text
elseIf RadioButton2.Checked then
   Label1.Text="You selected " & RadioButton2.Text
elseIf RadioButton3.Checked then
   Label1.Text="You selected " & RadioButton3.Text
elseIf RadioButton4.Checked then
   Label1.Text="You selected " & RadioButton4.Text
end if
End Sub
</script>

<html>
<body>

            <form runat="server">
            <asp:RadioButton id="RadioButton1" Text="RadioButton1" GroupName="radiobutton" runat="server"/>
            <br>
            <asp:RadioButton id="RadioButton2" Text="RadioButton1" GroupName="radiobutton" runat="server"/>
            <br>
            <asp:RadioButton id="RadioButton3" Text="RadioButton1" GroupName="radiobutton" runat="server"/>
            <br>
            <asp:RadioButton id="RadioButton4" Text="RadioButton1" GroupName="radiobutton" runat="server"/>
            <br>
            <asp:Button text="Check" OnClick="submit" ID="Button1" runat="server"/>
            <p><asp:Label id="Label1" runat="server"/></p>
            </form>

</body>
</html>

Output


Share this article on