用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 相关文章推荐
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
浅谈webpack对样式的处理
Jan 05 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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 mysql数据库操作分页类
2008/06/04 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
angular2使用简单介绍
2016/03/01 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python命名空间详解
2014/08/18 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
八年级作文之感恩
2019/11/22 职场文书