JQuery中对复选框进行勾选实现显示和隐藏问题

今天在做项目中遇到了显示和隐藏问题,对就jquery比较了解,因此就通过jquery方式进行了实现,下面与大家分享下代码,首先要去网上下载一个JQuery脚本库,然后引用它,这是最基本的,相比大家都知道,我就不多说了,好了引用好后,就开始写代码了,如下:

   首先,我简单说下我的例子,就是我要修改一个图片,然后点击修改复选框,把上传图片的那部分显示出来了(本来是隐藏着的),好啦看代码把。

html代码:

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

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值