Question

我有一个构造函数，它在循环中创建了一系列复选框。

我正在尝试将复选框设置为选中，但它无效。

代码如下：

function customMultiSelect(pDiv, pOptions, inputID, currentSelected)
{        
    this.Div = pDiv;
    this.options = pOptions;    
    this._initialise();

    for (var idxOption = 0; idxOption < pOptions.length; idxOption++) {

        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.style.width = "30px";
        checkbox.style.border = "none";
        checkbox.style.float = "right";

        if (pOptions[idxOption] != "") {
            var arrTemp2 = pOptions[idxOption].split(",");
            var sText = arrTemp2[0];

            if (arrTemp2.length > 1) {
                sText = arrTemp2[1];
            }

            checkbox.value = arrTemp2[0];
            checkbox.id = inputID + "|" + idxOption;
            checkbox.checked = true;
            var textLabel = document.createElement("label");
            textLabel.appendChild(checkbox);
            textLabel.innerHTML += arrTemp2[1];
            textLabel.style.display = "block";
            textLabel.style.clear = "right";

        }

        this.Div.appendChild(textLabel);
    }

}

Answer 1

只需将checked属性改为checkbox.checked = true; ：

checkbox.setAttribute('checked', true);

Answer 2

您的问题是因为您使用textLabel.innerHTML += arrTemp2[1];以便重写和解析HTML。在此之前，您使用checkbox.checked = true仅操纵DOM属性，而在HTML中仅使用<input type="checkbox">，因此结果为textLabel.innerHTML = '<input type="checkbox">' + arrTemp2[1];，再次为您提供未选中的复选框。

您应该使用checkbox.setAttribute('checked', 'checked')，然后HTML将为<input type="checkbox" checked>，在这种情况下textLabel.innerHTML += arrTemp2[1];等于textLabel.innerHTML = '<input type="checkbox" checked="checked">' + arrTemp2[1];

关于HTML属性和DOM属性之间的区别：

setAttribute实际操纵HTML属性。如果未设置DOM属性，则该属性将填充到该属性。但是，设置属性时，更改属性不会影响属性。例如，您有一个输入标记：

<input type="text" value="asdf">

你在现场输入一些东西，比如说“qwer”，然后你会看到差异

document.querySelector('input').value // "qwer"
document.querySelector('input').getAttribute('value') // "asdf"

当你改变它的属性时

document.querySelector('input').setAttribute('value', 'zxcv')

您不会在页面中看到任何更改，因为document.querySelector('input').value仍然是“qwer”。更改实际上发生在HTML中，您将看到开放的devtool：

<input type="text" value="zxcv">

最后，当您提交表单而非属性时， DOM属性已发出。

设置HTML复选框以使用javascript检查

2 个答案: