asked on

How to set checked equal to true in asp.net checkboxlist using jquery

OK. I need help. I was hoping to avoid it. But I must ask.
I am using an asp.net 4.5 CheckBoxList Control and want to loop through the checkboxes and make them checked using JQUERY [the latest build].

Here is the HTML generated by the CheckBoxList Control:

<label for="ContentPlaceHolder1_cblAudienceTypes" id="ContentPlaceHolder1_lblAudienceType">Audience Type (select all that apply) 
    <a href="#" title="Select All" class="selectallaudiencetypes">Select All </a>
</label>
<br />
<table id="ContentPlaceHolder1_cblAudienceTypes" class="cbltable">
    <tr>
        <td>
            <input id="ContentPlaceHolder1_cblAudienceTypes_0" type="checkbox" name="ctl00$ContentPlaceHolder1$cblAudienceTypes$0" tabindex="417" value="3" />
            <label for="ContentPlaceHolder1_cblAudienceTypes_0">Children</label>
        </td>
        <td>
            <input id="ContentPlaceHolder1_cblAudienceTypes_1" type="checkbox" name="ctl00$ContentPlaceHolder1$cblAudienceTypes$1" tabindex="417" value="4" />
            <label for="ContentPlaceHolder1_cblAudienceTypes_1">Tweens</label>
        </td>
        <td>
            <input id="ContentPlaceHolder1_cblAudienceTypes_2" type="checkbox" name="ctl00$ContentPlaceHolder1$cblAudienceTypes$2" tabindex="417" value="5" />
            <label for="ContentPlaceHolder1_cblAudienceTypes_2">Teens</label></td>
        <td>
            <input id="ContentPlaceHolder1_cblAudienceTypes_3" type="checkbox" name="ctl00$ContentPlaceHolder1$cblAudienceTypes$3" tabindex="417" value="6" />
            <label for="ContentPlaceHolder1_cblAudienceTypes_3">Adults</label>
        </td>
    </tr>
</table>

Open in new window

And here is the JQuery Function I am using, which does not work.

            $(".selectallaudiencetypes").click(function () {
                $(".cbltable").closest("td").nextAll("input:checkbox").prop("checked", true);
            });

Open in new window

What am I missing?
Additional Notes:
The Click() is triggered by an "a" tag.
I do not need to toggle the state of the check boxes back and forth, although if the solution requires it I am OK with it.

Let me know if I can add clarification.
Thank you,
Jason

ASKER CERTIFIED SOLUTION

leakim971

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

jsmithr

ASKER

Thanks.
The jsfiddle you provided worked [as you already knew]. However, when I included your code into my application, the js function stopped working. I did a little digging and found that the jquery ui [v 1.9] I am using to modify the appearence of the checkboxes is preventing the js function from changed the 'checked' state of the checkboxes.

$(document).ready(function() {

    $("#ContentPlaceHolder1_cblAudienceTypes input").button();

    $(".selectallaudiencetypes").click(function() {
        var b = $(this).text().indexOf("S") == 0;
        $(":checkbox", ".cbltable").prop("checked", b);
        $(this).text(b?"Unselect All ":"Select All ")
    });

})

Open in new window

I wonder why the jquery UI is getting in the way?
I mean, it's just rendered html getting modified client side by the jquery function, right?

Any ideas?
Jason

PS - what is indexof("S")? I don't understand that piece.

leakim971

please provide a link to your page

indexof("S") look for the first letter of the link
Select All
to know if we need to display "Select all" or "Unselect all"

jsmithr

ASKER

As far as the indexof("S") -- I get it now, thanks.

I have never 'shared' a jsfiddle -- so, I forked it and I think this is now the link:

http://jsfiddle.net/SpJmD/1/

Let me know if you can get to it.
Jason

leakim971

you transform all your INPUT (checkbox included) in button, what did you expect, schweppes?

leakim971

new one : http://jsfiddle.net/SpJmD/6/

$(document).ready(function() {
    $("#ContentPlaceHolder1_cblAudienceTypes input").button();

    $(".selectallaudiencetypes").click(function() {
        var b = $(this).text().indexOf("S") == 0;
        $(":checkbox", ".cbltable").button( "option", "disabled", b );
        $(this).text(b?"Unselect All ":"Select All ");
    });
})

Open in new window

jsmithr

ASKER

I guess I just don't understand. The original html I posted was rendered with the JQUERY UI Button effect applied? Isn't HTML still just HTML?

Also, I do not know what Schweppes is. GingerAle?

I will report back a little later...
Jason

leakim971

Check thé blast jsfidlle

jsmithr

ASKER

Hmmm....

'disabled' is not the same as "checked".

I see your point about 'transforming input into buttons' -- but during postback, I capture the selection as checkboxes checked or unchecked. So, I assumed they are all still checkboxes, right?

I guess not.
Not sure how to proceed at this point.

Jason

leakim971

set both : http://jsfiddle.net/SpJmD/7/

$(document).ready(function() {
    $("#ContentPlaceHolder1_cblAudienceTypes input").button();

    $(".selectallaudiencetypes").click(function() {
        var b = $(this).text().indexOf("S") == 0;
        $(":checkbox", ".cbltable").prop("checked", b);
        $(":checkbox", ".cbltable").button( "option", "disabled", b );
        $(this).text(b?"Unselect All ":"Select All ");
    });
})

Open in new window