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

问题描述

|

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>

    

解决方法

        干得好：

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/     ,        与其使用

window.onload

对您的复选框标记进行硬编码，我将添加

createCheckbox

函数来为您创建唯一的ID。 这是一个例子：

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

然后，每次调用

createCheckbox

时，系统都会为您提供具有唯一ID的新元素的标记。