爲元素內的複選框創建標籤

我嘗試使行動態，問題是當我添加複選框與標籤動態使用JavaScript不起作用。然而，我默認使用Html創建的那個工作正常。爲元素內的複選框創建標籤

事實上，我希望我添加的圖像（on.png/off.png）取代了複選框。當我只用html（複選框+標籤）來執行代碼時，代碼就可以工作，但現在我只想用Javascript創建元素，我可以標記標籤，但是當它單擊時它不起作用。

這是我的所有代碼：

main.html中

<HTML> 
<HEAD> 
<TITLE> </TITLE> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<SCRIPT language="javascript"> 
    function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.id = "id2" ; 
     cell1.appendChild(element1); 

     // Create label 
     var label = document.createElement("label"); 
     label.for = "id2" ; 
     cell1.appendChild(label); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount + 1; 

     var cell3 = row.insertCell(2); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     cell3.appendChild(element2); 


    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 

     } 
     }catch(e) { 
      alert(e); 
     } 
    } 

</SCRIPT> 
</HEAD> 
<BODY> 
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

<TABLE id="dataTable" width="350px" border="1"> 
    <TR> 
     <TD><INPUT type="checkbox" name="chk" id="id1" /> <label for="id1" > </label> </TD> 
     <TD> 1 </TD> 
     <TD> <INPUT type="text" /> </TD> 
    </TR> 
    </TABLE> 
</BODY> 
</HTML>

的style.css

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label 
{ 
    background: url(images/off.png) no-repeat; 
    height: 64px; 
    width: 64px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

    input[type=checkbox]:checked + label 
{ 
    background: url(images/on.png) no-repeat; 
    height: 64px; 
    width: 64px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    }

請幫助我。

來源

2012-09-25 Mils

您應該仔細研究一下使用模板庫，如[小鬍子]（https://github.com/janl/mustache.js）。它會讓你的開發更容易，項目將更具可擴展性，可維護性等。 – pdoherty926

我會盡力的。謝謝ethagnawl。 – Mils

更改此

label.for = "id2" ;

這個

label.htmlFor = "id2" ;

因爲一些JavaScript實現不容許的關鍵字/保留單詞作爲對象屬性，必須爲for屬性制定解決方法，因此他們選擇了htmlFor。

類似的情況是.class，這就是爲什麼他們使用.className。

來源

2012-09-25 14:50:18

你的問題是17行，label.for = "id2" ;應該是label.htmlFor = "id2";

來源

2012-09-25 14:49:50 ultranaut

爲元素內的複選框創建標籤

回答

相關問題