CODEWITHSUNDEEP
jqueryasp.net
Ye Myat Aung
Ye Myat Aung

Reputation: 1853

Check ASP.NET checkbox with jQuery

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?

Upvotes: 6

Views: 35973

Answers (5)

SquidScareMe
SquidScareMe

Reputation: 3218

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.

Upvotes: 10

ChessWhiz
ChessWhiz

Reputation: 4702

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

Upvotes: 8

Kev
Kev

Reputation: 119806

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.

Upvotes: 1

Marek Karbarz
Marek Karbarz

Reputation: 29304

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)

Upvotes: 1

Eli
Eli

Reputation: 17825

You need a hash to select by id:

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

Upvotes: 0

Related Questions