用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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
jquery 插件学习(四)
Aug 06 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
bootstrap表单示例代码分享
May 18 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python网络编程学习笔记(一)
2014/06/09 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python学习思维导图(必看篇)
2017/06/26 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
django ORM之values和annotate使用详解
2020/05/19 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
舞蹈教育学专业推荐信
2013/11/27 职场文书
致裁判员加油稿
2014/02/08 职场文书
幼儿教师工作感言
2014/02/14 职场文书
仓管员岗位责任制
2014/02/19 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Elasticsearch 配置详解
2022/04/19 Java/Android