Monday, November 1, 2010

Fetching value of radiobuttonlist using jquery

Mostly situations arise in which we want to hide or show something based on the value selected from a radiobuttonlist.Using server side code for this purpose is not a good option as it causes postback and is slow.
Lets see how this can be done using jquery.
__________________________________________________________________________________
This is the script:
 <script type="text/javascript">
        $(document).ready(function() {
 $(('#<%=RdlTest.ClientID %>')).click(function() {
var name = $('#<%=RdlTest.ClientID %> input[type=radio]:checked').val();
 if (name == 1) {
 $('#test').hide('slow');
 }
 else if (name == 2) {
  $('#test').show('slow');
 }
  });
  });
    </script>
This is the asp.net code:
<asp:RadioButtonList ID="RdlTest" runat="server">
    <asp:ListItem Value="1" Text="first"></asp:ListItem>
    <asp:ListItem Value="2" Text="second"></asp:ListItem>
    </asp:RadioButtonList>

     <div id="test">
     This div will hide if you select first option<br />
     and show if you if you select second option.
     </div>
__________________________________________________________________________________
I have tested this code and it works for me. Hope that it works for you too.

No comments:

Post a Comment