用RadioButten或CheckBox实现div的显示与隐藏

当选择“女”时，显示“美女、才女”；当选择“男”时，隐藏 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样式属性
}

赞 (0)

相关推荐

  • android RadioButton和CheckBox组件的使用方法

    android RadioButton和CheckBox组件的使用方法

    RadioButton是单选按钮,多个RadioButton放在一个RadioGroup控件中,也就是说每次只能有1个RadioButton被选中.而CheckBox是多选按钮,Toatst是android中带的一个用于显示提示小窗口消息的控件,其提示的内容过一会儿会自动消失.RadioGroup和CheckBox控件设置监听器都是用的setOnCheckedChangeListener函数,其输入参数是一个函数,且函数内部要实现1个内部类.RadioGroup监听器的输入参数用的是RadioG

  • input:checkbox多选框实现单选效果跟radio一样

    最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行. 废话不多说,直接代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

  • 使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    效果图: HTML: 复制代码 代码如下: <div id="chklist" style="padding:10px; font-size:14px; "> <input type="checkbox" value='1' /><label>aaaaaa</label> <input type="checkbox" value='2' /><label>

  • 纯JS打造网页中checkbox和radio的美化效果

    纯JS打造网页中checkbox和radio的美化效果

    图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

  • jQuery获取Radio,CheckBox选择的Value值(示例代码)

    $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发$("#text_id").selec

  • JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

  • Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    //如果之前有选中的,则把选中radio取消掉$("#tj_cat .pro_category").each(function(){ if ($(this).attr('checked')){                        $(this).attr('checked' ,false);                    }});//获取被选中的标签的值radio:(checkbox和这个一样) var val=$('input:radio[name="se

  • 用RadioButten或CheckBox实现div的显示与隐藏

    当选择"女"时,显示"美女.才女":当选择"男"时,隐藏 aspx 页面内容: 复制代码 代码如下: <head runat="server"> <title>用RadioButten(或CheckBox)实现div的显示与隐藏</title> <script type="text/javascript" language="javascript"

  • jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

    本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏.分享给大家供大家参考,具体如下: 研究了一下toggle之click触发DIV的显示与隐藏,现在把代码发上来. HTML代码: <input type="button" id="btn" title="Click me 你会看到效果" value="点击此处" /> <div id="content" styl

  • javascript实现div的显示和隐藏的小例子

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>oec2003</title><script language="JavaScript" type="text/JavaScript"><!--func

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    如下所示: ng-true-value="1" //代表选中的时候,值为1 ng-false-value="0" //代表未选中的时候,值为0 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script

  • jquery实现弹出div,始终显示在屏幕正中间的简单实例

    以下代码块就能始终让弹出div位于屏幕的正中心,希望对大家有所帮助! 复制代码 代码如下: //让指定的DIV始终显示在屏幕正中间       function setDivCenter(divName){           var top = ($(window).height() - $(divName).height())/2;           var left = ($(window).width() - $(divName).width())/2;           var s

  • jQuery 插件 将this下的div轮番显示

    复制代码 代码如下: /* 将this下的div轮番显示 dname指定需要执行此动作的元素,如果没有指定dname,将默认全部子元素; tname指定与dname对应的激活元素; speed显示切换速度; effe显示的效果; */ (function(){ .fn.w_picSwap=function(dname,tname,speed,effe){ speed=speed || 2000; dname=dname || ""; tname=tname || ""

  • javascript实现显示和隐藏div方法汇总

    javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ mar

  • 基于jquery实现的定时显示与隐藏div广告的实现代码

    下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTimeout函数来实例,下面我给大家分享我的方法.html页面中我们随便放些东西 复制代码 代码如下: <div class="toolbarframe" style="display:none;"><a href="http://www.jb51.net" target="_blan

  • jQuery基于闭包实现的显示与隐藏div功能示例

    本文实例讲述了jQuery基于闭包实现的显示与隐藏div功能.分享给大家供大家参考,具体如下: <div class="binds"> <div class="phonebind"> <h3>手机绑定</h3> <p>当前手机号码:<span id="oldPhone">$!{user.phone}</span><input type="butto

随机推荐