您的位置：首页 > Web前端 > JQuery

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

2015-06-30 13:46 761 查看

今天在做项目中遇到了显示和隐藏问题，对就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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航