how to assign a unique id to each checkbox

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>

how to assign unique id to every checkbox in the above code.................

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

score 1 · Answer 1 · answered May 27 '11 at 13:29

Instead of hard-coding your checkbox markup in window.onload, I'd add a createCheckbox function to handle creating unique IDs for you.

Here's an example:

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

Then, each time you call createCheckbox, you'll be given markup for a new element with a unique ID.

score 0 · Accepted Answer · answered May 27 '11 at 13:52

Here you go:

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);
        }
    };
};

So instead of using a static template, I create the HTML string in a loop. The ID is based on the result of new Date (which returns a time-stamp) and the iterator i. For instance the ID values might be:

cb_13065045104750
cb_13065045104751
cb_13065045104752

Live demo: http://jsfiddle.net/simevidas/psmR5/

how to assign a unique id to each checkbox

2 Answers2

Linked