[英]Setting HTML check box to check using javascript
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);
}
}
Just put checked attribute instead of checkbox.checked = true; 只需将选中的属性而不是checkbox.checked = true;即可。 :
:
checkbox.setAttribute('checked', true);
Your problem is because you use textLabel.innerHTML += arrTemp2[1];
您的问题是因为您使用
textLabel.innerHTML += arrTemp2[1];
so that the HTML is rewritten and parsed. 这样就可以重写和解析HTML。 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];
在此之前,您使用
checkbox.checked = true
只操作DOM属性,而在HTML中,它仅是<input type="checkbox">
,因此结果是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];
您应该使用
checkbox.setAttribute('checked', 'checked')
,然后HTML将被<input type="checkbox" checked>
,在这种情况下, textLabel.innerHTML += arrTemp2[1];
equals textLabel.innerHTML = '<input type="checkbox" checked="checked">' + arrTemp2[1];
等于
textLabel.innerHTML = '<input type="checkbox" checked="checked">' + arrTemp2[1];
About the difference between HTML attribute and DOM property: 关于HTML属性和DOM属性之间的区别:
setAttribute
actually manipulates the HTML attribute. setAttribute
实际上操纵HTML属性。 If a DOM property is not set, the attribute will populate to the property. 如果未设置DOM属性,则该属性将填充到该属性。 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 然后您在字段中输入了一些内容,说“ qwer”,那么您将看到区别
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". 您不会在页面上看到任何更改,因为
document.querySelector('input').value
仍然是“ qwer”。 The change actually takes place in HTML, open devtool you will see: 更改实际上是在HTML中进行的,打开devtool您将看到:
<input type="text" value="zxcv">
And finally, its the DOM property sent out when you submit a form, not the attribute. 最后,当您提交表单时发送的是DOM属性 ,而不是属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.