通过checkbox复选框控制层的显示隐藏
阅读次代码如下:
<html> <head><title></title> <META content = "text/html; charset = gb2312" http-equiv = Content-Type> <META content = "MSHTML 5.00.2919.6307" name = GENERATOR> <script type="text/javascript"> window.onload=function(){setInterval("show()",1000)} function show(){ var ifcheck=document.getElementById("ck"); var showdiv=document.getElementById("dd"); if(ifcheck.checked) {showdiv.style.display="none";} else {showdiv.style.display="block";} } </script> </head> <body> <div> <input type="checkbox" id="ck"/>显示/埋没 </div> <div id="dd" style="border:1px solid black;width:300px;height:300px;background-color:gray;"> 这是通过checkbox节制其显示/埋没的div </div> </body> </html>
以下方法请加载JQ:
<table> <tr> <th bgcolor="#FFFFFF" class="r_bg" width="20%"> 登录界面背景: </th> <td align="left" bgcolor="#FFFFFF" class="right_bg" width="80%"> <img src="../images/<%=ImgName2 %>" alt="登录背景" style="background-repeat: repeat-x; width: 140px; height: 100px;" /> <span style="width: 400px"> <asp:CheckBox ID="CheBox" runat="server" Text="修改" Width="50px" /></span> </td> </tr> 下面红色是隐藏那部分: <tr id="upload1" style="display:none;"> <th bgcolor="#ffffff" class="r_bg"> 浏览图片: </th> <td align="left" colspan="4" bgcolor="#ffffff" class="right_bg"> <asp:FileUpload ID="UploadImg" runat="server" Width="220px" /> <asp:Button ID="btn_chuan" runat="server" OnClick="btn_chuan_Click" OnClientClick="javascript:return checkfrom();" CssClass="btna" Text="←上传" /> <span style="color="red";"> <asp:Label ID="lblimage" runat="server"></asp:Label></span> </td> </tr> </table> JQuery代码: <script type="text/javascript"> $("#CheBox").click(function () { var $cr = $("#CheBox"); if ($cr.is(":checked")) { $("#upload1").css("display", "block"); } else { $("#upload1").css("display", "none"); } }); </script>