html对于不起作用 [英] htmlFor not working

问题描述

我使用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?

JSFiddle

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/

这篇关于html对于不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！