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?

SquidScareMe · Accepted Answer · 2011-04-20 19:11:02Z

10

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.

edited Apr 20, 2011 at 19:11

answered Apr 20, 2011 at 16:50

SquidScareMe

3,2362 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SquidScareMe Over a year ago

Sorry about that. I was misssing two single quotes inside the function body. Try again, please.

ChessWhiz · Accepted Answer · 2011-04-20 18:05:28Z

8

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

edited Apr 20, 2011 at 18:05

answered Apr 20, 2011 at 16:51

ChessWhiz

4,7123 gold badges29 silver badges40 bronze badges

Comments

Marek Karbarz · Accepted Answer · 2011-04-20 16:52:28Z

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:

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

$('#<%= chkMonS1.ClientId %>').attr("checked", true)
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)
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)

Community · Accepted Answer · 2017-05-23 12:24:00Z

1

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.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Apr 20, 2011 at 16:54

Kev

120k53 gold badges308 silver badges396 bronze badges

1 Comment

Ye Myat Aung Over a year ago

I've tried that way but unfortunately, still doesn't work. :(

Eli · Accepted Answer · 2011-04-20 16:49:42Z

0

You need a hash to select by id:

$('#chkAllMon').click(function () {
    $('#chkMonS1').attr('checked', true)
    $('#chkMonS2').attr('checked', true)
});

answered Apr 20, 2011 at 16:49

Eli

17.8k4 gold badges39 silver badges49 bronze badges

1 Comment

Marek Karbarz Over a year ago

Which still wouldn't work in ASP.NET (due to naming conventions)

Collectives™ on Stack Overflow

Check ASP.NET checkbox with jQuery

5 Answers 5

1 Comment

Comments

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

1 Comment

Linked

Related