Show/Hide the Div with 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
<%@ 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
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));
}
}
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架
"发表评论
crorkservice fiverr[37.233.27.*]2015/10/17 4:40:57#2BWTVrt Nice guidelines, many because of the writer. It is comprehensible in my opinion now, the usefulness and importance is overwhelming. Many thanks yet again and best of luck!
Combine wort of dealing water. Once the any plan, of effects.
