Check ASP.NET checkbox with jQuery

Question

I have following ASP.NET server control checkboxes.

<asp:checkbox id="chkMonS1" runat="server" />
<asp:checkbox id="chkMonS2" runat="server" />
<asp:checkbox id="chkAllMon" runat="server" />

And also other check boxes.

<asp:checkbox id="chkTueS1" runat="server" />
<asp:checkbox id="chkTueS2" runat="server" />
<asp:checkbox id="chkAllTue" runat="server" />

So I tried to use jQuery to select all check boxes like so..

<script type="text/javascript">
        $('chkAllMon').click(
        function () {
            $('chkMonS1').attr('checked', true)
            $('chkMonS2').attr('checked', true)
        }
        )
    </script>

However, it doesn't work. Where did it go wrong?

Answer 1

you're trying to use the server-side id on the client. it should look something like this:

$('#<%=chkAllMon.ClientID %>').click(
        function () {
            $('#<%=chkMonS1.ClientID %>').attr('checked', true)
            $('#<%=chkMonS2.ClientID %>').attr('checked', true)
        }

Explanation: ASP.NET IDs are the id you see on the server. When ASP.NET controls render to html they are given another id.

Answer 2

If you are using ASP.NET 4.0 or newer, this is easy to fix.

First, you need a # symbol in your jQuery selectors, like this: $('#chkMonS1').

Also, you'll need to set ClientIdMode="Static" in the ASP.NET elements, as shown below. This will set the HTML id to the same value as the ASP.NET id. See this article for the reason why.

<asp:checkbox id="chkAllTue" runat="server" ClientIDMode="Static" />

Answer 3

The Ids for the checkboxes will be very different on the client side (with all their placeholders etc.) so jQuery is simply not finding them. There are a few solutions you could try:

1. If the script is on the same page you could embed ClientId using C# like so:

   $('#<%= chkMonS1.ClientId %>').attr("checked", true)

2. If the script is embedded in an external file, and you're using ASP.NET 4.0 you can change the ClientIDMode to "Static" and you can use the exact Ids of your checkboxes (see more here http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)

3. You could try this jquery selector to find a given checkbox (since the client ID is always going to end with the ID you assigned despite of what ASP.NET adds to the front of it; this could be dangerous if you're using the same IDs in different naming containers though):

   $('input[id$='chkMonS1']').attr("checked", true)

Answer 4

If this is ASP.NET 2.0 then you need to use the server generated ID:

<script type="text/javascript">
    $('#<%=chkAllMon.ClientID%>').click(
    function () {
        $('#<%=chkMonS1.ClientID%>').attr('checked', true)
        $('#<%=chkMonS2.ClientID%>').attr('checked', true)
    }
    )
</script>

If it's ASP.NET 4.0 then see ChessWiz's answer.