用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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
VUE项目初建和常见问题总结
Sep 12 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
js 分页全选或反选标识实现代码
2011/08/09 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
jquery选择器使用详解
2014/04/08 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
使用python实现生成用户信息
2017/03/20 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
英文简历中的自我评价
2013/10/06 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python