Question

window.onload=function(){

 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);
} else {
    var ul = target.parentNode.getElementsByTagName('ul')[0];
    target.parentNode.removeChild(ul);
}
};

}

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

如何为上述代码中的每个复选框指定唯一ID .................

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

Answer 1

我没有在window.onload中对您的复选框标记进行硬编码，而是添加createCheckbox函数来处理为您创建唯一ID。

以下是一个例子：

var gCheckboxID = 0;
function createCheckbox()
{
    return '<input type="checkbox" id="Prefix' + String(gCheckboxID++) + '" />';
}

然后，每次调用createCheckbox时，您都会获得具有唯一ID的新元素的标记。

Answer 2

你走了：

window.onload = function() {
    var container = document.getElementById('container');

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

        if ( target.checked && target.parentNode.getElementsByTagName('ul').length === 0 ) {
            ul = document.createElement('ul');
            for ( i = 0; i < 3; i++ ) {
                str += '<li><input type="checkbox" id="cb_' + +(new Date) + i + '"></li>';    
            }
            ul.innerHTML = str;
            target.parentNode.appendChild(ul);
        } else {
            ul = target.parentNode.getElementsByTagName('ul')[0];
            target.parentNode.removeChild(ul);
        }
    };
};

因此，我不是使用静态模板，而是在循环中创建HTML字符串。该ID基于new Date（返回时间戳）和迭代器i的结果。例如，ID值可能是：

cb_13065045104750
cb_13065045104751
cb_13065045104752

现场演示： http://jsfiddle.net/simevidas/psmR5/

如何为每个复选框分配唯一ID

2 个答案: