将“已创建”复选框设置为选中不起作用

setting created checkbox as checked not working

本文关键字：设置 不起作用 复选框 创建 已创建      更新时间：2023-09-26

感谢您的帮助...我正在javascript中创建一系列html元素，包括复选框。我想继续默认标记其中一个复选框。我无法使用纯 javascript 获得"checked"属性的存在（checkbox.checked = true;）或jquery库（见下文）。看看我的例子，谢谢 - 编辑：纯jQuery解决方案确实有效，但我在使用javascript解决方案时遇到了问题。后续复选框元素似乎禁止先前复选框元素上的"checked"属性。有关示例，请参阅此小提琴...小提琴示例

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>

为什么不坚持使用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');
    }
}

小提琴

或者根本不使用 jQuery，只做：

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

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

您需要#才能通过id选择一个元素。

$("#zoneAll")

使用这个：

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

确保您的选择器正常工作。我假设您正在尝试按 ID zoneAll 进行选择，在这种情况下，您需要使用 $('#zoneAll') .如果您的节点在 HTML 中如下所示，这将起作用：

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

编辑：我最初说使用attr()，这是可怕的坏错误。经过一番谷歌摸索，prop()确实是要走的路。

相关文章：