Question

这是我的.aspx页面，我正在使用JQuery 根据选中的复选框并取消选中，我应该进行div显示并隐藏我在这里，当我显示div标签时，我甚至重置了下拉值

但是当我选中/取消选中复选框时，似乎没有发生任何事情

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <%-- <script type="text/javascript">
    <script type="text/javascript" src="JScript.js"></script>--%>

    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() 
    {
    if ($("#CheckBox1").is(':checked')) 
    { 
     $('#divControlGroup').css("display", "block"); 
     $("#ddlcounty option:first").attr("selected", true);

    } 
    else 
    { 
    $('#divControlGroup').css("display", "none"); 

     } 
    })
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td>
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="false" />
            </td>
            <td>
                <div id="divControlGroup" runat="server">
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    <asp:DropDownList ID="ddlcounty" runat="server">
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">India</asp:ListItem>
                        <asp:ListItem Value="2">US</asp:ListItem>
                        <asp:ListItem Value="3">UK</asp:ListItem>
                    </asp:DropDownList>
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

请告诉我我在哪里，任何帮助都会很棒

由于

最后解决问题

<script type="text/javascript">
    $(document).ready(function() 
    {
     $('#<%= CheckBox1.ClientID %>').change(function() 
    {    
     if($(this).is(':checked')) 
     {       
      $("#divControlGroup").css("display", "block");   
      $("#ddlcounty option:first").attr("selected", true); 
      } 
     else 
        { 
    $("#divControlGroup").css("display", "none"); 
     } 
        })
        });
    </script>

Answer 1

您当前的代码仅在加载页面时执行一次。您似乎想要绑定到复选框的change事件：

$('#CheckBox1').change(function() {

   if($(this).is(':checked')) {

      ...

   }

});

<强>更新

我刚刚注意到你正在使用.NET控件。如果上述代码无法解决您的问题，则问题可能是呈现的 ID与您为控件提供的ID不同。在浏览器中，选择查看源，以查看ID 真正的内容。

如果您使用的是.NET 4，则可以在复选框上设置ClientIDMode="Static"，以确保呈现的控件的ID确实为CheckBox1。

请参阅ClientIDMode。

如果您使用的.NET版本低于4，则必须将CheckBox1.ClientID传递给JavaScript。

类似的东西：

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

   if($(this).is(':checked')) {

      ...

   }

});

另一个选项，无论.NET版本如何，都可以为包装器分配ID：

<td id="my-checkbox">
    <asp:CheckBox ID="CheckBox1" runat="server" Checked="false" />
</td>

$('#my-checkbox :checkbox').change(function() { ... });

Answer 2

您的代码未附加到复选框的更改事件，它仅在“就绪”时执行，这意味着它只在页面准备就绪时执行一次。

Answer 3

你可以这样做。我假设这是你想要的。


$('#CheckBox1').change(function () {
   $('#divControlGroup').toggle('slow');
});

在Jquery中选中/取消选中复选框

3 个答案: