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


Posted in Javascript onSeptember 21, 2013

当选择“女”时,显示“美女、才女”;当选择“男”时,隐藏 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样式属性 
}
Javascript 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
BootStrap中
Dec 10 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 #Javascript
JS.findElementById()使用介绍
Sep 21 #Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 #Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 #Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 #Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 #Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 #Javascript
You might like
php通过session防url攻击方法
2014/12/10 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
利用python发送和接收邮件
2016/09/27 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python的缺点和劣势分析
2019/11/19 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python两种注释用法的示例
2020/10/09 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
税务干部鉴定材料
2014/02/11 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
音乐教师个人总结
2015/02/06 职场文书
企业团队精神心得体会
2016/01/19 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Python编写冷笑话生成器
2022/04/20 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS