Click here to Skip to main content
15,883,705 members
Articles / Web Development / ASP.NET

Show/Hide the Div with RadioButtonList Using JavaScript

Rate me:
Please Sign up or sign in to vote.
4.71/5 (4 votes)
1 Jul 2011CPOL 40.9K   7   5
Making the div show/hide based on the selected radiobutton from the radiobuttonlist using JavaScript.

Introduction

Here, I show a simple way of getting the selected/checked radiobuttonlist and show and hide a div using JavaScript.

The below page is the default.aspx which has the JavaScript method by name GetRDBValue and the parameters are sent by adding attribute onclick in the code behind (default.aspx.cs) i.e., page_load of the same.

Here, if the radiobutton yes is selected, I show the div and if no is selected, I hide the div. The rest of the code is self explanatory.

Default.aspx

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>    
      <script type="text/javascript" language="javascript">
      function GetRDBValue(showw)
        {
        debugger;
        var showdiv = document.getElementById(showw);
            var radio = document.getElementsByName('rdbGender');
             if(radio.length > 0)
            {
	            for(var j=0 ; j < radio[0].cells.length ; j++)
	            {
		            for(var k=0 ; k < radio[0].cells[j].children.length ; k++)
		            {
			            if(radio[0].cells[j].children[k].checked == 
			            true && radio[0].cells[j].innerText == "Yes")
			            {
			              showdiv.style.display ="block" ;

			            }
			            else if(radio[0].cells[j].children[k].checked == 
			            true && radio[0].cells[j].innerText == "No")
			            {
			            showdiv.style.display = "none";
			            }
		            }
	            }
            }
    }
        </script>

</head>
<body>
    <form id="form1" runat="server">
    
    <div id="checkdiv" runat="server" 
    style="display:none">Lokesh perumbali</div>
    <asp:Panel ID="pnl1" runat="server" 
    style="display:none">Lokesh test</asp:Panel>
    <div>
    <asp:RadioButtonList ID="rdbGender" runat="server">
            <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
            <asp:ListItem Text="No" Value="2"></asp:ListItem>            
</asp:RadioButtonList>

    </div>
    </form>
</body>
</html>

Default.aspx.cs

C#
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        rdbGender.Attributes.Add("onClick", 
		string.Format("GetRDBValue('{0}');", checkdiv.ClientID));
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Wipro Technologies
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalshow hide div Pin
Java Experience24-Dec-12 4:13
Java Experience24-Dec-12 4:13 
GeneralMy vote of 5 Pin
Omar Gameel Salem1-Jul-11 10:46
professionalOmar Gameel Salem1-Jul-11 10:46 
SuggestionNot really an article Pin
DaveAuld1-Jul-11 6:50
professionalDaveAuld1-Jul-11 6:50 
GeneralRe: Not really an article Pin
AspDotNetDev1-Jul-11 11:11
protectorAspDotNetDev1-Jul-11 11:11 
GeneralRe: Not really an article Pin
Richard MacCutchan1-Jul-11 21:51
mveRichard MacCutchan1-Jul-11 21:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.