用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访问CSS属性的几种方式介绍
Jul 21 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
element跨分页操作选择详解
Jun 29 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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生成静态HTML速度快类库
2007/03/18 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
PHP 翻页 实例代码
2009/08/07 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Django实现文件上传下载
2019/10/06 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python识别验证码的实现示例
2020/09/30 Python
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
征婚广告词
2014/03/17 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年党员整改措施
2014/10/24 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
美元符号 $
2022/02/17 杂记
Python实现对齐打印 format函数的用法
2022/04/28 Python