我使用 JavaScript 为每个按钮创建了 3 个 radio
按钮和一个 label
.当我尝试使用 htmlFor
在标签中添加 for
时,它不会将其应用于实际的 DOM 元素.意思是,当我尝试在网页上使用 label
时,它不会选择 radio
按钮.
I created 3 radio
buttons and a label
for each of them using JavaScript. When I try adding for
in the label using htmlFor
, it doesn't apply it to the actual DOM Element. Meaning, when I try using the label
on the webpage, it doesn't select the radio
button.
我检查了开发人员工具,发现 labels
没有应用 for
.
I checked in the developer tools, and saw that the labels
did not have for
applied to them.
我做错了什么,我该如何解决?
What am I doing wrong, and how can I fix it?
var _doc = document,
sliderWrapper = _doc.getElementById('sliderWrapper'),
radioWrapper = _doc.createElement('div');
for (var i = 0; i < 3; i++) {
var radio = _doc.createElement('input');
var niceRadio = _doc.createElement('lable');
var index = radioWrapper.children.length / 2;
niceRadio.className = 'niceRadio';
niceRadio.htmlFor = radio.id = 'sliderRadio' + index;
radio.type = 'radio';
radio.name = 'myName';
radioWrapper.appendChild(radio);
radioWrapper.appendChild(niceRadio);
console.log(niceRadio.htmlFor);
}
sliderWrapper.appendChild(radioWrapper);
.niceRadio {
position: relative;
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 50%;
border: 5px solid orange;
}
.niceRadio:hover {
border-color: lightblue;
}
<div id="sliderWrapper">
</div>
htmlFor
用于将标签绑定到特定的表单元素.但是,它使用该表单元素的 id
(而不是 name
).
The htmlFor
is used to bind a label to a specific form element. However, it uses the id
of that form element (not the name
).
来源MDN:
HTMLLabelElement.htmlFor 属性反映了 for 的值内容属性.这意味着这个脚本可访问的属性是用于设置和读取 的 content 属性的值,即标签关联控件元素的 ID.
The HTMLLabelElement.htmlFor property reflects the value of the for content property. That means that this script-accessible property is used to set and read the value of the content property for, which is the ID of the label's associated control element.
另外,在你的小提琴中,你拼错了 label
.
Also, in your fiddle, you misspelled label
.
更新小提琴:https://jsfiddle.net/h09mm827/2/
这篇关于htmlFor 不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!