javascript - 将创建的复选框设置为选中不起作用

Question

感谢您的帮助...我正在用 javascript 创建一系列 html 元素，包括复选框。我想继续并默认标记其中一个复选框。我无法使用纯 javascript (checkbox.checked = true;) 或 jquery 库(见下文)使“checked”属性存在。请参阅我的示例，谢谢 - 编辑:纯 jQuery 解决方案确实有效，但我在使用 javascript 解决方案时遇到了问题。后续的复选框元素似乎抑制了先前元素的“checked”属性。请参阅此 fiddle 的示例... 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);
        }
}

这是 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>

Answer 1

为什么不坚持使用 jQuery，因为无论如何你都在使用它:

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

或者根本不使用 jQuery，只需执行以下操作:

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

请注意，您尝试从 DOM 中获取的元素 $("#zoneAll") 实际上是在您尝试获取它之后附加到 DOM 中的，因此请这样做这种方式总是会失败，因为当您尝试访问该元素时该元素不存在。