用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简易缓动插件(源码打包)
Feb 16 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
js实现网页随机验证码
Oct 19 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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中养成7个面向对象的好习惯
2010/07/17 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python 字典操作提取key,value的方法
2019/06/26 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
12月红领巾广播稿
2014/02/13 职场文书
土木工程专业推荐信
2014/02/19 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
升国旗演讲稿
2014/09/05 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android