Show/Hide Server Controls with RadioButtonlist using Javascript

Hi All,

More than one time, i had got the problem to use radiobuttonlist with javascript because i never got access to the exact element of list. so finally i get it and Today i will show you a simple way to hide or show any server side control on selected or checked the radiobuttonlist.

Suppose you have a radiobuttonlist in your aspx page and on selecting different radiobutton, you want to display different results without postback means using javascript.

So Here is the code for that…

Source Code of Your .aspx Page :-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head runat="server"> <title></title> <script type="text/javascript" language="javascript"> function show(rbl, d1, d2) { var rbl = document.getElementById('rbl'); var dv1 = document.getElementById(d1); var dv2 = document.getElementById(d2); var options = rbl.getElementsByTagName("input"); for (var i = 0; i < options.length; i++) { if (options[i].checked) { if (options[i].value == "Male") { = "block"; = "none"; } else if (options[i].value == "Female") { = "none"; = "block"; } } } } </script> </head> <body> <form id="form1" runat="server"> <div id="dvMale" runat="server" style="display: none"> Male</div> <div id="dvFemale" runat="server" style="display: none"> Female</div> <div> <asp:RadioButtonList ID="rbl" runat="server" onclick="show('rbl','dvMale','dvFemale')"> <asp:ListItem Text="Male" Value="Male"></asp:ListItem> <asp:ListItem Text="Female" Value="Female"></asp:ListItem> </asp:RadioButtonList> </div> </form> </body> </html>

So now you can see that on selecting/changing radiobuttons, you can get your display without postback.