当在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