在asp.net中使用jquery隐藏div标记

您好， 我有asp.net复选框控件和asp.net dropdownlist控件在div标记中

我想在选中该框时隐藏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; }

函数ModifyOccup（）{
$（'myocup'）.removeClass（'display1'）；
$（'myocup'）.removeClass（'display1'）；
$（'myocup'）.removeClass（'display'）；
$（'myocup'）.removeClass（'display'）；
如果（$（'#'）。是（':checked'））{
$（'myocup'）.addClass（'display1'）；
}
否则{
$（'myocup'）.addClass（'display'）；
}
}
......................
Style.css文件
..........................
.display{display:none；}
.display1{display:inherit；}

试试看

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

$（'#'）。单击（函数（e）
{
this.checked？$（'myocup'）.show（）：$（'myocup'）.hide（）；
}

当你用jQuery选择东西时，你需要使用CSS选择器语法，因此

$（“#myocup”）

而不是你的东西。

有了这个：$（“[id$=myocup]”）你只会在id中得到对你来说真正重要的部分，即使你的控件运行在=server；

这与Wallace Breza的答案类似，但有一些修正

 $(function(){

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

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

$（函数（）{
$（'#'）。更改（函数（e）
{
this.checked？$（'myocup'）.show（）：$（'myocup'）.hide（）；
});
});

---

使用此脚本，您应该删除

标记中的所有内容、您的

CSS

以及复选框的

onclick

功能。

这里有一个向上/向下滑动的选项，应该可以使用

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

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

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

应该是

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

---

我会绑定到“change”，因为并不是每个人都使用鼠标触发复选框。他正在尝试获取元素的客户端id，因此当页面呈现时，它将等于$（“#myocup”）。Alex是正确的，您可以使用此$（“#myocup”）或$（“[id$=myocup]”）哎呀，我以为你指的是他获取复选框的方式，而不是div.+1-以前从未见过。这是jQuery为属性选择器添加的扩展，还是一个标准CSS属性选择器？朋友Wallace，在我阅读了此文档后，我开始使用它：而不是使用…name$=…我使用…id$=…这是太好了。谢谢你提供的信息。我一定会用这个。