用RadioButten或CheckBox实现div的显示与隐藏

前端技术 2023/09/08 JavaScript
当选择“女”时，显示“美女、才女”；当选择“男”时，隐藏 aspx 页面内容：
复制代码 代码如下:

<head runat=\"server\">
<title>用RadioButten（或CheckBox）实现div的显示与隐藏</title>
<script type=\"text/javascript\" language=\"javascript\">
function show2() {
if (document.getElementById(\"Radio2\").checked) {
document.getElementById(\"nvInfo\").style.display = \"block\";
}
else {
document.getElementById(\"nvInfo\").style.display = \"none\";
}
}
</script>
</head>
<body>
<form id=\"form1\" runat=\"server\">
<div>
<input id=\"Radio1\" type=\"radio\" runat=\"server\" name=\"11\" onclick=\"show2()\" value=\"11\" />男
<input id=\"Radio2\" type=\"radio\" runat=\"server\" name=\"11\" onclick=\"show2()\" value=\"22\" />女
<%-- <input id=\"Radio2\" type=\"checkbox\" runat=\"server\" name=\"11\" onclick=\"show2()\" value=\"22\" />女--%>
</div>
<div id=\"nvInfo\" runat=\"server\" style=\"display: none;\">
<input id=\"Radio5\" type=\"radio\" runat=\"server\" name=\"2\" onclick=\"show1\" value=\"11\" />美女
<input id=\"Radio6\" type=\"radio\" runat=\"server\" name=\"2\" onclick=\"show2\" value=\"22\" />才女
</div>
</form>
</body>

cs页面代码：
复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)
{
this.Radio2.Checked = true;
if (this.Radio2.Checked)
this.nvInfo.Attributes.CssStyle.Add(\"display\", \"block\"); //从.cs给.aspx中的HTML控件添加CSS样式属性
if (this.Radio1.Checked)
this.nvInfo.Attributes.CssStyle.Add(\"display\", \"none\"); //从.cs给.aspx中的HTML控件添加CSS样式属性
}

本文地址：https://www.stayed.cn/item/22856

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案