用RadioButten或CheckBox实现div的显示与隐藏
更新时间：2013年09月21日 13:01:15 作者：
用RadioButten（或CheckBox）实现div的显示与隐藏，当选择“女”时，显示“美女、才女”；当选择“男”时隐藏，具体实现如下，感兴趣的朋友可以参考下
当选择“女”时，显示“美女、才女”；当选择“男”时，隐藏 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样式属性
}
复制代码 代码如下:
<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样式属性
}
相关文章
在开发过程中会经常遇到window.open打开的页面，同时问题出现了如何刷新上层页面呢？本文将详细介绍，需要了解的朋友可以参考下2012-12-12
JavaScript实现将数组中所有元素连接成一个字符串的方法
这篇文章主要介绍了JavaScript实现将数组中所有元素连接成一个字符串的方法,涉及javascript中采用join方法进行数组转化的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
IE下window.onresize 多次调用与死循环bug处理方法介绍
IE下window.onresize多次调用与死循环bug处理方法介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
以下JS代码实现了焦点滚动图的效果方法，有需要的朋友可以参考一下2013-06-06
这篇文章主要为大家介绍下通过firefox的FireBug调试JS，需要的朋友可以参考下2013-12-12
设置与获取样式属性是UI控件与特效库非常关键的部分，设置样式我们基本可以用cssText来包打天下，但获取样式就不是这回事了。2010-01-01
这篇文章主要介绍了JS如何获取Promise对象里面的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
UNIAPP实现微信小程序登录授权和手机号授权功能(uniapp做微信小程序)
uniapp开发小程序,先授权用户信息后再出现手机号授权的页面进行手机号授权,完成后返回上一页面并把信息存入后台以及前台缓存中,方便使用,这篇文章主要介绍了UNIAPP实现微信小程序登录授权和手机号授权（uniapp做微信小程序）,需要的朋友可以参考下2024-08-08
easyui combobox开启搜索自动完成功能的实例代码
下面小编就为大家带来一篇easyui combobox开启搜索自动完成功能的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要给大家介绍了关于javascript类数组的深入理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论