html對於不起作用

Question

我使用JavaScript創建了3個radio按鈕和一個label 。 當我嘗試添加for在使用標簽htmlFor ，它並不將其應用到實際的DOM元素。 意思是，當我嘗試使用網頁上的label時，它沒有選擇radio按鈕。

我在開發者工具檢查，看到該labels沒有for適用於他們。

我在做什么錯，該如何解決？

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> 

Answer 1

htmlFor用於將標簽綁定到特定的表單元素。 但是，它使用該表單元素的id （而不是name ）。

來源MDN ：

HTMLLabelElement.htmlFor屬性反映了for content屬性的值。 這意味着該腳本可訪問的屬性用於設置和讀取content屬性的值，該屬性是標簽關聯的控件元素的ID 。

另外，在您的小提琴中，您拼寫了label 。

更新小提琴： https : //jsfiddle.net/h09mm827/2/