Home/ Questions/Q 6948079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:46:32+00:00

this is my .aspx page where i am using JQuery Based on the check

  • 0

this is my .aspx page where i am using JQuery
Based on the check box checked and uncheck i should make an div display and hide
i here when i am displaying the div tag i am even reseting the dropdown values

but when ever i check/uncheck the checkbox nothing seems happening

<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>

pls let me know where i amgoing where, any help would be great

Thanks

finally anser for the problem 

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your current code only executes once when the page is loaded. It looks like you’ll want to bind to the checkbox’s change event:

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

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

      ...

   }

});

    Update

    I just noticed you’re using .NET controls. If the above code does not solve your problem, the issue is probably that the rendered IDs are not the same as the IDs you give your control. In your browser, select View Source, to see what the ID really is.

    If you’re using .NET 4, you can set ClientIDMode="Static" on your checkbox, to make sure that the ID of the rendered control will really be CheckBox1.

    See ClientIDMode.

    If you’re using a .NET version lower than 4, you would have to pass CheckBox1.ClientID to your JavaScript.

    Something like:

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

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

      ...

   }

});

    Another option, which will work regardless of .NET version, would be to assign an ID to a wrapper:

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

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