在 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() function：

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

請注意，這會將相同的事件分配給所有復選框。
如果您想為每個復選框附加不同的事件，您應該找到一種方法來迭代 addCheckboxes function 中的每個復選框，或者單獨創建每個框，並在每次創建時附加事件。

如果您想在線運行您的代碼並與我們分享，請隨時在此網站上創建一個 jsFiddle 。

Answer 2

已經完成了為每行動態添加行和生成 ID 以及附加腳本以添加和刪除行功能。 檢查此鏈接