html对于不起作用

本文介绍了html对于不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

更新的提琴: jsfiddle/h09mm827/2/