用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 06 Javascript
Javascript中typeof 用法小结
May 12 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vue调用语音播放的方法
Sep 27 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
微信小程序pinker组件使用实现自动相减日期
May 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的array_multisort()使用方法介绍
2012/05/16 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php中请求url的五种方法总结
2017/07/13 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue.js实现数据响应的方法
2018/08/13 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python实现kmp算法的实例代码
2019/04/03 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
暑期社会实践方案
2014/02/05 职场文书
房地产开发项目建议书
2014/05/16 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
工程承诺书怎么写
2014/05/24 职场文书
成本会计实训报告
2014/11/05 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
vue3不同环境下实现配置代理
2022/05/25 Vue.js