用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作用域和闭包
Sep 23 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
javascript实现画板功能
Apr 12 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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中实现进程间通讯
2006/10/09 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
js转html实体的方法
2016/09/27 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python os模块学习笔记
2015/06/21 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python3学生名片管理v2.0版
2018/11/29 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python 函数中的参数类型
2020/02/11 Python
python两个list[]相加的实现方法
2020/09/23 Python
护士实习生自我鉴定范文
2013/12/10 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
企业文化建设实施方案
2014/03/22 职场文书
大客户经理岗位职责
2015/04/09 职场文书
医院感染管理制度
2015/08/05 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL