setting created checkbox as checked not working

Question

thanks for helping... I'm creating a series of html elements in javascript, including checkboxes. I want to go ahead and mark one of the checkboxes by default. I cannot get the 'checked' property to exist using either pure javascript (checkbox.checked = true;) or jquery library (see below). See my example, thank you - EDIT: The pure jQuery solution does work, but I'm having trouble with a javascript solution. Subsequent checkbox elements seem to inhibit the 'checked' attribute on prior ones. See this fiddle for an example...fiddle example

function createToolbarElements(){
        //------topbar-------------
        var topbar = document.getElementById("topbar");
        topbar.innerHTML = "ZONE: ";

        //zone set
        ART.regions.unshift("All");
        ART.regions.push("osj");
        var numRegions = ART.regions.length;
        var region;
        for(i=0; i<numRegions; i+=1){
            region = ART.regions[i];
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.name = region;
            checkbox.value = region;
            checkbox.id = "zone"+region;
            if(region === "All"){
                $("#zoneAll").prop("checked", true);
            }
            topbar.appendChild(checkbox);
            var label = document.createElement('label')
            label.htmlFor = region;
            label.appendChild(document.createTextNode(region));
            topbar.appendChild(label);
        }
}

here's the HTML:

    <div id="topbar" style="z-index: 2; position:absolute; height: 24px; padding: 4px;
    background-color: #DDD; color:#111;  font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; 
    font-size:10pt; line-height:1.2">
    </div>

This question appears to be off-topic because it is about a typo (a missing #). — j08691
– j08691, Commented Sep 27, 2013 at 17:43
If you know which checkbox you want to check, why not wait until the end of the loop and call $("#zoneAll").prop("checked", true); or even document.getElementById('zoneAll').checked = true then instead of checking each iteration? — Jason P
– Jason P, Commented Sep 27, 2013 at 17:44
I've added html... The pure jQuery solution does work, but I'm having trouble with a javascript solution. Subsequent checkbox elements seem to inhibit the 'checked' attribute on prior ones. See this fiddle for an example... fiddle — csupak
– csupak, Commented Sep 27, 2013 at 19:39

adeneo · Accepted Answer · 2013-09-27 18:17:52Z

1

Why not just stick with jQuery, as you're using it anyway :

function createToolbarElements(){
        $('#topbar').html('ZONE: ');

        ART.regions.unshift('All');
        ART.regions.push('osj');

    var numRegions = ART.regions.length,
        region     = null;

    for(i=0; i<numRegions; i++){
        region = ART.regions[i];

        $('<input />', {
            type : 'checkbox',
            name : region,
            value: region,
            id   : 'zone' + region,
            checked: region == 'All'
        }).appendTo('#topbar');

        $('<label />', {
            'for': 'zone' + region,
            text : region
        }).appendTo('#topbar');
    }
}

FIDDLE

or not use jQuery at all, and just do:

checkbox.checked = region === "All";

Note that the element you're trying to grab from the DOM, $("#zoneAll") is actually appended to the DOM after you're trying to get it, so doing it that way will always fail as the element doesn't exist when you're trying to access it.

edited Sep 27, 2013 at 18:17

answered Sep 27, 2013 at 17:46

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

8 Comments

csupak Over a year ago

I tried reversing those instructions - still didn't have a checked attribute.

adeneo Over a year ago

Did you check out the fiddle, it clearly works just fine as the checkboxes are checked ?

csupak Over a year ago

Yes, I just did. I got it to work, thank you. I'm new to jQuery as of today. I still don't understand why setting the checked attribute in the ways I tried did not work, though. I was not able to set the checked value at all.

adeneo Over a year ago

I'm guessing it's because your selector would fail to get the element, as it wasn't appended when you where trying to access it, so it would always fail.

csupak Over a year ago

I was thinking that too, but I switched the append statement ahead of it, and it doesn't work. And I'm able to set other things, like name, value, type. I tried your non-jQuery suggestion as well, but didn't work...

var checkbox = document.createElement("input");                 checkbox.type = "checkbox";                 checkbox.name = region;                 checkbox.value = region;                 checkbox.id = "zone"+region;                                  topbar.appendChild(checkbox);                 checkbox.checked = region==="All";

|

James Montagne · Accepted Answer · 2013-09-27 17:41:46Z

1

You need # to select an element by id.

$("#zoneAll")

answered Sep 27, 2013 at 17:41

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

Bucket · Accepted Answer · 2013-09-27 18:12:20Z

1

Use this:

$("#zoneAll").prop("checked", true);

Make sure your selector works. I assume you're trying to select by the ID zoneAll, in which case you need to use $('#zoneAll'). This will work in the case that your node looks like this in your HTML:

<input type="checkbox" id="zoneAll"></input>

EDIT: I originally said to use attr(), which was horrendously badwrong. After some Google-Fu, prop() is indeed the way to go.

edited Sep 27, 2013 at 18:12

answered Sep 27, 2013 at 17:40

Bucket

7,5599 gold badges38 silver badges48 bronze badges

3 Comments

j08691 Over a year ago

+1 for the missing #, -1 for suggesting to use .attr() over .prop().

Bucket Over a year ago

Ah, you're right. I'm stuck in the older days of jQuery. Thanks for the insight into prop().

csupak Over a year ago

The selector is correct. I've matched the resulting id ('zoneAll') to what I've typed, including with the '#' symbol $('#zoneAll').

Collectives™ on Stack Overflow

setting created checkbox as checked not working

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related