Question

感谢帮助...... 我在javascript中创建了一系列html元素，包括复选框。我想继续并默认标记其中一个复选框。我无法使用纯javascript（checkbox.checked = true;）或jquery库（见下文）来获取'checked'属性。看看我的例子，谢谢 - 编辑：纯jQuery解决方案确实有效，但我遇到了一个javascript解决方案的问题。后续的复选框元素似乎会禁止先前的“已检查”属性。看一下这个小提琴的例子...... 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

使用此：

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

确保您的选择器有效。我假设您尝试按ID zoneAll进行选择，在这种情况下您需要使用$('#zoneAll')。这将适用于您的节点在HTML中显示如下：

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

编辑：我原本说使用attr()，这是非常糟糕的错误。在一些Google-Fu之后，prop()确实是可行的方法。

Answer 2

您需要#按id选择元素。

$("#zoneAll")

Answer 3

为什么不坚持使用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，因此以这种方式执行它将始终失败，因为元素不会当你试图访问它时存在。

设置已创建复选框已选中无效

3 个答案: