Reading the selected value from asp:RadioButtonList using jQuery

Question

I've got code similar to the following...

<p><label>Do you have buffet facilities?</label>
  <asp:RadioButtonList ID="blnBuffetMealFacilities:chk" runat="server">
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
  </asp:RadioButtonList></p>
<div id="HasBuffet">
  <p><label>What is the capacity for the buffet?</label>
  <asp:RadioButtonList ID="radBuffetCapacity" runat="server">
    <asp:ListItem Text="Suitable for upto 30 guests" value="0 to 30"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 50 guests" value="30 to 50"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 75 guests" value="50 to 75"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 100 guests" value="75 to 100"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 150 guests" value="100 to 150"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 250 guests" value="150 to 250"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 400 guests" value="250 to 400"></asp:ListItem>
  </asp:RadioButtonList></p>
</div>

I want to capture an event when the radio list blBuffetMealFacilities:chk changes client side and perform a slide down function on the HasBuffet div from jQuery. What's the best way to create this, bearing in mind there are several similar sections on the page, where I want questions to be revealed depending on a yes no answer in a radio list.

Tensile

On usability: Probably you should think about the listitem texts. A place with for example 40 places would probably select "upto 30" because the can not serve up to 50, but the values in your list would indicate that the upto50 was the right choice.... – Opalescent

Answer 1

this:

$('#rblDiv input').click(function(){
    alert($('#rblDiv input').index(this));
});

will get you the index of the radio button that was clicked (i think, untested) (note you've had to wrap your RBL in #rblDiv

you could then use that to display the corresponding div like this:

$('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show();

Is that what you meant?

Edit: Another approach would be to give the rbl a class name, then go:

$('.rblClass').val();

Excitement

Nice work - how would I get the selected value rather than the index of the input? – Tensile

Because of the stupid way that WebForms builds the controls, I used jQuery to assign classes to the inputs/checkboxes and then used $('.classname').val() to get the currently selected value. – Staats

you can always change the clientidmode to static, then your id's stay the same – Undersell

Answer 2

The simple way to retrieve checked value of RadioButtonList1 is:

$('#RadioButtonList1 input:checked').val()

Edit by Tim:

where RadioButtonList1 must be the ClientID of the RadioButtonList

var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked"); 

Touristy

i tried it but not work but i use same search criteria in another way and it work : alert($('#<%= RadioButtonList1.ClientID %>').find('input:checked').val()); – Triad

Yes, we must get the ClientID first. And jQuery style is: var clientId = '<%= RadioButtonList1.ClientId%>'; $('#'+clientId+' input:checked').val() – Touristy

Answer 3

This worked for me...

<asp:RadioButtonList runat="server" ID="Intent">
  <asp:ListItem Value="Confirm">Yes!</asp:ListItem>
  <asp:ListItem Value="Postpone">Not now</asp:ListItem>
  <asp:ListItem Value="Decline">Never!</asp:ListItem>
</asp:RadioButtonList>

The handler:

$(document).ready(function () {
  $("#<%=Intent.ClientID%>").change(function(){
   var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();

   if(rbvalue == "Confirm"){
    alert("Woohoo, Thanks!");
   } else if (rbvalue == "Postpone"){
    alert("Well, I really hope it's soon");
   } else if (rbvalue == "Decline"){
    alert("Shucks!");
   } else {
    alert("How'd you get here? Who sent you?");
   }
  });
});

The important part: $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();

Quincy

Answer 4

According to me it'll be working fine...

Just try with this

   var GetValue=$('#radiobuttonListId').find(":checked").val();

---

The Radiobuttonlist value to be stored on GetValue(Variable).

Mimimimic

Answer 5

A Radio Button List instead of a Radio button creates unique id tags name_0, name_1 etc. An easy way to test which is selected is by assigning a css class like

var deliveryService;
$('.deliveryservice input').each(function () {
    if (this.checked) {
        deliveryService = this.value
    }

Horselaugh

Answer 6

Try this:

$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()

Poltroonery

Answer 7

following is the code we eventually created. A breif explanation first. We used a "q_" for the div name wrapped around the radio button question list. Then we had "s_" for any sections. The following code loops through the questions to find the checked value, and then performs a slide action on the relevant section.

var shows_6 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Groom') {
    $("#s_6").slideDown();
  } else {
    $("#s_6").slideUp();
  }
};
$('#q_7 input').ready(shows_6);
var shows_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Bride') {
    $("#s_7").slideDown();
  } else {
    $("#s_7").slideUp();
  }
};
$('#q_7 input').ready(shows_7);
$(document).ready(function() {
  $('#q_7 input:radio').click(shows_6);
  $('#q_7 input:radio').click(shows_7);
});

<div id="q_7" class='question '><label>Who are you?</label> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" />
  </p> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" />
  </p> 

</div> 

The following allows us to make the question mandatory...

<script type="text/javascript"> 
var mandatory_q_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected != '') {
    $("#q_7").removeClass('error');
  }
};
$(document).ready(function() {
    $('#q_7 input:radio').click(function(){mandatory_q_7();});
});
</script> 

Here's an example of the actual show / hide layer

<div class="section" id="s_6"> 
    <h2>Attire</h2> 
    ...
</div>

Tensile

Answer 8

Try the below code:

<script type="text/javascript">
    $(document).ready(function () {

        $(".ratingButtons").buttonset();

    });
 </script>


<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" runat="server"
            AutoPostBack="True" DataSourceID="SqlDataSourceSizes"     DataTextField="ProdSize"
            CssClass="ratingButtons" DataValueField="_ProdSizeID" Font-Size="X-Small" 
            ForeColor="#666666">
</asp:RadioButtonList>

Bedraggle

This is only availabel if you use jQuery UI....jqueryui.com/demos/button/#radio – Tensile

Answer 9

Why so complex?

$('#id:checked').val();

Will work just fine!

Visual

Answer 10

I found a simple solution, try this:

var Ocasiao = "";    
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });

Mopup

thats a terrible idea, addressing the rbl by client id. You dont have control over the id. What happens if, in the future, you nest the rbl in a panel? Your id will be different and your js will break. fail. – Excitement

You can generate JS: <%=blnBuffetMealFacilities.ClientId%> – Mopup

Answer 11

Andrew Bullock solution works just fine, I just wanted to show you mine and add a warning.

//Works great

$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});

//Warning - works in firefox but not IE8 .. used this for some time before a noticing that it didnt work in IE8... used to everything working in all browsers with jQuery when working in one.

$('#<%= radBuffetCapacity.ClientID %>').change(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});

Codd

Answer 12

I voted for Vinh's answer to get the value.

If you need to find the corresponding label, you can use this code:

$('#ClientID' + ' input:checked').parent().find('label').text()

Volplane

Answer 13

For my scenario, my JS was in a separate file, so using a ClientID response output wasn't conducive. Surprisingly, the solution was as simple as adding a CssClass to the RadioButtonList, which I found out on DevCurry

Just incase that solution disappears, add a class to your radio button list

<asp:RadioButtonList id="rbl" runat="server" class="tbl">...

As the article points out, when the radio button list is rendered, the class "tbl" is appended to the surrounding table

<table id="rbl" class="tbl" border="0">
<tr>...

Now because of the CSS class that has been appended, you can just refer to input:radio items within your table, based on the css class selector

$(function () {
            var $radBtn = $("table.tbl input:radio");
            $radBtn.click(function () {
                var $radChecked = $(':radio:checked');
                alert($radChecked.val());
            });
        });

Again, this avoids using the "ClientID" mentioned above which I found messy for my scenario. Hope this helps!

Astrea