Get RadioButtonList SelectedValue in JavaScript

Scenario: There will be times when you would like to access the selected value of your RadioButtonList on the client-side via JavaScript. One of those time coulde be you want to hide/show something elements on your page based on the radio button option selected. Another time could be you want to open a popup window and pass this value to a page via querystring. So the code sample below will is what you can use to get the selected value of the RadioButonList and then use is per your need.

This is nothing really new but a very old concept. I was lying around in one of my testsite and recently I found someone asking the same question on one of the forum. So I thought to put this on here.

Code:

  JavaScipt

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script language="javascript" type="text/javascript">         function rblSelectedValue() {             //Get the radiobuttonlist reference             var radio = document.getElementsByName('<%= RadioButtonList1.ClientID %>');                           //local variable to store selectedvalue             var selectedvalue;                           //loop through the items in radiobuttonlist             for (var j = 0; j < radio.length; j++) {                 if (radio[j].checked) {                     selectedvalue = radio[j].value;                     alert(selectedvalue);                     var popupurl = "PopUp.aspx?selval=" + selectedvalue;                     window.open(popupurl, '', 'height=700,width=700,resizable,scrollbars');                     break;                 }             }         } </script>

RadioButtonList

?

1 2 3 4 5 6

<asp:radiobuttonlist id="RadioButtonList1" onclick="rblSelectedValue()" runat="server">            <asp:listitem value="1">One</asp:listitem>            <asp:listitem value="2">Two</asp:listitem>            <asp:listitem value="3">Three</asp:listitem>            <asp:listitem value="4">Four</asp:listitem>        </asp:radiobuttonlist>

Brief Explanation:

The RadioButtonList has four items and and "onclick" event that will call the rblSelectedValue javascript function.

In the rblSelectedValue() function, first we get the reference to our RadioButtonList1.

?

1	var radio = document.getElementsByName('<%= RadioButtonList1.ClientID %>');

Note we are not using 'RadioButtonList1" as a parameter to getElementsByName method but using a special syntax to the the ClientID for the RBL1, which is generated by asp.net framework.

Then we loop through the items in the RBL using for loop. Note the radio.length, which gives the the number of items in the radiobuttonlist. In the loop we check if the individual item is checked and if it is then assign the value of that item to our local variable, selectedValue.

Now we can use this value as per our need. As shown in the example, we have an alert as a debug statement to check if we are getting right value and then we are passing this value as a querystring parameter to a url and open that url in a new popup window using window.open method.

Update (04/25/2011):

Here is code to get selected value of RadioButtonList using jQuery. The two different ways are more generic i.e. if you have multiple radiobuttonlist, you don’t have to replicate js code for each of them.

1: Adding onclick event directly to RadioButtoList:

function rblSelectedValue(rbl) {
            var selectedvalue = $("#" + rbl.id + " input:radio:checked").val();
            alert(selectedvalue);
        }

<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnClick="rblSelectedValue(this)">

2: Add identical CssClass to each RadioButtonList:

$(function () {
   $(".myrbl").click(function () {
     var selectedvalue = $("#" + $(this).attr('id') + " input:radio:checked").val();
     alert(selectedvalue);
   });
});

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="myrbl">