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

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