Setting HTML check box to check using javascript

Question

I have a constructor that creates a series of checkboxes inside a loop.

I am trying to set the checkboxes to checked, but it is not working.

The code is below:

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

Just put checked attribute instead of checkbox.checked = true; :

checkbox.setAttribute('checked', true);

Answer 2

Your problem is because you use textLabel.innerHTML += arrTemp2[1]; so that the HTML is rewritten and parsed. Before that you use checkbox.checked = true only manipulates the DOM property, while in HTML it's only <input type="checkbox"> , so the result is textLabel.innerHTML = '<input type="checkbox">' + arrTemp2[1]; , gives you an unchecked checkbox again.

You should use checkbox.setAttribute('checked', 'checked') , then the HTML will be <input type="checkbox" checked> , in such case textLabel.innerHTML += arrTemp2[1]; equals textLabel.innerHTML = '<input type="checkbox" checked="checked">' + arrTemp2[1];

---

About the difference between HTML attribute and DOM property:

setAttribute actually manipulates the HTML attribute. If a DOM property is not set, the attribute will populate to the property. However, when property is set, change attribute will not affect property. For example you have a input tag:

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

And you input something in the field, say "qwer", then you will see the difference

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

And when you change its attribute

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

You will not see any change in the page, because document.querySelector('input').value is still "qwer". The change actually takes place in HTML, open devtool you will see:

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

And finally, its the DOM property sent out when you submit a form, not the attribute.