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

在javascript中选中复选框时创建复选框

2 个答案: