代码笔记

通过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>


推荐阅读

通过checkbox复选框控制层
通过checkbox复选框控制...