Get selected radio button value using JQuery

Using JQuery, we can get the selected radio button value. Lets see how we can do this..

Consider you have a list of Radio Buttons in your form like below

<form id="form1">
    <input type="radio" name="myRadio" value="1" /> 1 <br />
    <input type="radio" name="myRadio" value="2" /> 2 <br />
    <input type="radio" name="myRadio" value="3" /> 3 <br />
</form>

JQuery code to get the selected radio button value is

$('#form1 input').on('change', function () {
        var value = ('input[type="radio"]:checked').val();
        alert(value);
    });

 or you can also use the following code

$('#form1 input').on('change', function () {
        var value = ('input[name="myRadio"]:checked').val();
        alert(value);
    });

When a user selects the radio button, then JQuery's .change() event gets called. And when this event is raised, we are storing the value of the selected radio button in a javascript variable.

For live example look at this fiddle: http://jsfiddle.net/codingsolver/MsYqx/

In this way we can get the selected radio button value using JQuery.

For more posts on JQuery please visit: JQuery

Read more...

Radio Button List in Asp.Net

Radio Button List contains list of Radio Buttons.

Example:
<asp:RadioButtonList
            ID="rblMovies"
            runat="server">
            <asp:ListItem
                Text="The Remains of the Day"
                Value="movie1" />
            <asp:ListItem
                Text="Star Wars"
                Value="movie2" />
            <asp:ListItem
                Text="Pulp Fiction"
                Value="movie3" />
        </asp:RadioButtonList>


Above code contains a RadioButtonList control that contains three ListItem controls that correspond to the three radio buttons. All the List controls use the ListItem control to represent individual list items.

The ListItem control supports the following five properties:

Attributes—Enables you to add HTML attributes to a list item.
Enabled—Enables you to disable a list item.
Selected—Enables you to mark a list item as selected.
Text—Enables you to specify the text displayed by the List Item.
Value—Enables you to specify a hidden value associated with the List Item.
You use the Text property to indicate the text that you want the option to display, and the Value property to indicate a hidden value associated with the option. For example, the hidden value might represent the value of a primary key column in a database table.

The Selected property enables you to show a list item as selected. Selected radio buttons and check boxes appear checked. The selected option in a DropDownList is the default option displayed. Selected options in a ListBox appear highlighted. And in the case of a BulletedList control, the selected property has no effect whatsoever.

The Enabled property has different effects when used with different List controls. When you set a ListItem control’s Enabled property to the value False when using the DropDownList or ListBox controls, the list item is not rendered to the browser. When you use this property with a CheckBoxList, RadioButtonList, or BulletedList control, the list item is ghosted and nonfunctional.

Read more...