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

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