Question

问候，我在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; }

Answer 1

当您使用jQuery选择内容时，您需要使用CSS Selector语法，因此$('#myOccup')代替您拥有的内容。

Answer 2

用这个：$（'[id $ = myOccup]'）你只会获得id中真正重要的部分，即使你的控件是runat = server;

Answer 3

试一试......

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

Answer 4

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

 $(function(){

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

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

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

Answer 5

这是一个应该有效的上滑/下滑选项。

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

我也认为你很亲密......你忘了在选择器中输入＃：

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

应该是

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

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

5 个答案: