CODEWITHSUNDEEP
javascriptjquery
csupak
csupak

Reputation: 145

setting created checkbox as checked not working

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>

Upvotes: 0

Views: 1203

Answers (3)

adeneo
adeneo

Reputation: 318162

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.

Upvotes: 1

Bucket
Bucket

Reputation: 7521

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.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78630

You need # to select an element by id.

$("#zoneAll")

Upvotes: 1

Related Questions