用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写的一个DIV 弹出网页对话框
Aug 14 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
原生JS实现微信通讯录
Jun 18 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 变量定义方法
2009/06/14 PHP
zend framework多模块多布局配置
2011/02/26 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php中文验证码实现方法
2015/06/18 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
python PIL模块与随机生成中文验证码
2016/02/27 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
乡镇交通安全实施方案
2014/03/29 职场文书
纪律教育月活动总结
2014/08/26 职场文书
员工团队活动方案
2014/08/28 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
政风行风建设整改方案
2014/10/27 职场文书
办公室个人总结
2015/02/28 职场文书
2015员工年度考核评语
2015/03/25 职场文书
拖欠货款起诉状
2015/05/20 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript