在 asp.net 中使用 jquery 隐藏 div 标签答案

【问题标题】：using jquery in asp.net to hide div tag在 asp.net 中使用 jquery 隐藏 div 标签
【发布时间】：2010-05-18 18:34:05
【问题描述】：

您好，我在 div 标签中有 asp.net 复选框控件和 asp.net 下拉列表控件。

我想在选中该框时隐藏 div 并在取消选中该框时取消隐藏它。

我用 jquery 尝试了几种方法，但我做不到。

这是我的代码，请看一下并告诉我它有什么问题。

 <%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

  <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">
        function ModifyOccup() {

            $('myOccup').removeClass('display1');
            $('myOccup').removeClass('display1');
            $('myOccup').removeClass('display');
            $('myOccup').removeClass('display');





            if ($('#<%=chkOccup.ClientID %>').is(':checked')) {

                $('myOccup').addClass('display1');
            }
            else {
                $('myOccup').addClass('display');
            }
        }

                </script>


                  <asp:CheckBox ID="chkOccup" runat="server" Style="top: 1055px; left: 355px;
                    position: absolute; height: 22px; width: 126px" Text="Check to modify" onclick=" ModifyOccup()"/>


         <div id ="myOccup" >

                 <asp:DropDownList ID="cmbWorkField" runat="server" Style="top: 1090px; left: 350px;
                    position: absolute; height: 22px; width: 126px">

                </asp:DropDownList>


      </div>
</asp:Content>



......................
Style.css File
..........................


    .display { display: none; }
    .display1 { display: inherit; }

【问题讨论】：

标签： asp.net jquery html

【解决方案1】：

当你用 jQuery 选择东西时，你需要使用 CSS 选择器语法，所以$('#myOccup') 而不是你那里的东西。

【讨论】：

他正在尝试使用获取元素的客户端 ID，因此当页面呈现时，它将等于 $('#myOccup')。
Alex 是正确的，你可以使用这个 $('#myOccup') 或 $('[id$=myOccup]')
糟糕，您以为您指的是他获取复选框的方式，而不是 div。

【解决方案2】：

有了这个：$('[id$=myOccup]') 你只会在 id 中得到对你来说真正重要的部分，即使你的控制是 runat=server;

【讨论】：

+1 - 以前从未见过。这是 jQuery 为属性选择器添加的扩展，还是标准的 CSS 属性选择器？
朋友华莱士，我已经开始使用这个了，在我阅读了这个文档之后：api.jquery.com/attribute-ends-with-selector 而不是使用 ...name$=... 我使用 ...id$=.. .
太好了。谢谢（你的）信息。我一定会用这个。

【解决方案3】：

这类似于 Wallace Breza 的回答，但有一些修复。

 $(function(){

         $('#<%=chk0ccup.ClientID %>').change(function(e)
        {

            this.checked ? $('#myOccup').show() : $('#myOccup').hide();
        });
   });

使用此脚本，您应该删除<script> 标签、CSS 和复选框的onclick 功能中的所有内容。

【讨论】：

【解决方案4】：

试试这个...

$('#<%=chkOccup.ClientID %>').click(function(e)
{
    this.checked ? $('#myOccup').show() : $('#myOccup').hide();
}

【讨论】：

我会绑定到“更改”，因为不是每个人都使用鼠标来触发复选框。

【解决方案5】：

这是一个应该可以工作的向上/向下滑动选项。

$('#chkOccup').click(function(){
  $('#myOccup').slideToggle();           
});

我也认为你很接近......你忘了在选择器中输入 #：

$('myOccup').addClass('display1');

应该是

$('#myOccup').addClass('display1');

【讨论】：