當在JavaScript中選擇一個複選框創建複選框

Question

var container = document.getElementById('container'), 
    template = '<li>\ 
     <input type="checkbox">\ 
    </li>\ 
    <li>\ 
     <input type="checkbox">\ 
    </li>\ 
    <li>\ 
     <input type="checkbox">\ 
    </li>'; 

container.onchange = function(e) { 
    var event = e || window.event, 
     target = event.srcElement || event.target; 

    if(target.checked && target.parentNode.getElementsByTagName('ul').length === 0) { 
     var ul = document.createElement('ul'); 
     ul.innerHTML = template; 
     target.parentNode.appendChild(ul); 
    } 
}; 

HTML：

<ul id="container"> 
    <li> 
     <input type="checkbox"> 
    </li> 
    <li> 
     <input type="checkbox"> 
    </li> 
    <li> 
     <input type="checkbox"> 
    </li> 
</ul> 

我創建三個複選框。當一個複選框被選中時，另一個三盒出現在它下面等等。現在的問題是如何爲每個複選框分配唯一的id和onclick事件

Answer 1

首先，我會用jQuery（或其他框架）來做到這一點。在這個例子中，我使用jQuery。
然後，要創建一個元素到您的文檔做如下：

function addCheckboxes(){ 
    /* this will create the box but will not place it into your document */ 
    var newCheckboxes = $('<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />'); 

    /* this will put the code in the docuement */ 
    $('#container').append(newCheckboxes); 
} 

然後附上事件，使用jQuery的.live（）函數：

/* this will attach the click event */ 
    $('#container input').live('click', function(){ 
     addCheckboxes(); 
    }); 

請注意，這將分配相同的事件到所有複選框。
如果您想爲每個複選框附加一個不同的事件，您應該找到一種方法來迭代addCheckboxes函數內的每個複選框，或分別創建每個複選框，並在每次創建時附加該事件。

如果您想在線運行代碼並與我們共享，請隨時創建jsFiddle on this website。

Answer 2

已完成動態添加行併爲每行生成ID並附加用於添加和刪除行功能的腳本。 Check this link