設置HTML復選框以使用javascript進行檢查

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

只需將選中的屬性而不是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屬性 ，而不是屬性。