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.

Answer 1

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");  

Answer 2

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();