用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样式属性

  }