用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 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
javascript实现多边形碰撞检测
Oct 24 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
虫族 ZERG 概述
2020/03/14 星际争霸
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python九九乘法表的实例
2017/09/26 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python猜数字算法题详解
2020/03/01 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
企划主管岗位职责
2013/12/12 职场文书
运动会表扬稿范文
2015/05/05 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript