用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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
jQuery textarea的长度进行验证
May 06 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 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的聊天室设计
2006/10/09 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
numpy.transpose对三维数组的转置方法
2018/04/17 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
房地产开发计划书
2014/01/10 职场文书
大学生旷课检讨书
2014/01/22 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS