用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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Javascript webpack动态import
Apr 19 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/09/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php检测文本的编码
2015/07/26 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
浅谈五大Python Web框架
2017/03/20 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
详解python中递归函数
2019/04/16 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python3+Appium安装使用教程
2019/07/05 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
电力工程合作意向书
2015/05/11 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis