1

but with this code all checkbox elements have the same id...

var count;
var length = $('input[type=checkbox]').length
for(count=1;count<=length;count++){
    $('input[type=checkbox]').attr('id',count)
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
pouya
  • 43
  • 1
  • 8

5 Answers5

4

Set elements ID using .prop() or .attr()

$(':checkbox').prop("id", function( i ){
    return i;
});

jsBin demo

Set elements ID using .each()

$(':checkbox').each(function( i ){
    this.id = i;
});

jsBin demo

Both examples return:

<input id="0" type="checkbox">
<input id="1" type="checkbox">
<input id="2" type="checkbox">
<input id="3" type="checkbox">

if you want to start from 1 just use:

this.id = i+1;

Since numerical ID is not supported in non HTML5 (older) browsers, add any string prefix to the ID number like "el"+ (i+1)

Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
2
$('input[type=checkbox]').prop('id', function(i) {
     return ++i;
});
Ram
  • 143,282
  • 16
  • 168
  • 197
1

Use .each() instead:

$('input[type=checkbox]').each(function(i) {
    // i is the 0-based index of this element in the matched set
    $(this).prop('id', i); 
});
techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • 1
    `id` is a property, not an attribute; `.prop()` would be more appropriate. – Ja͢ck May 04 '13 at 15:37
  • @Jack That's an old debate but where is it stipulated than id is now a property no more an attribute? I can find any info on this. – A. Wolff May 04 '13 at 15:38
  • @Jack BTW, i know id is both but have you any link? – A. Wolff May 04 '13 at 15:40
  • @Jack - Or even better, just use `this.id` as in roXon's answer. Less code to write, less code to execute and (negligibly) faster as well. – techfoobar May 04 '13 at 15:40
  • @roasted I would suggest reading [this question](http://stackoverflow.com/questions/5874652/prop-vs-attr). – Ja͢ck May 04 '13 at 15:41
  • Yes, `this.id` is of course the best =D it's a fair bit faster because you don't have to wrap `this` in a jQuery object first. – Ja͢ck May 04 '13 at 15:42
  • @Jack I have, but still id should be fixed (and are always string), so i cannot see any advantage to use prop() instead of attr(). "the property always represents the current state while the attribute corresponds to the default value" Id should always stays as default value – A. Wolff May 04 '13 at 15:44
  • @Jack - Yes, but unless you are doing it on a loop over a lot of items, the difference isn't even measurable i believe. But nonetheless `this.id` is the way to do i'd say. – techfoobar May 04 '13 at 15:44
  • @roasted I'd rather err on the safe side with these things :) to be fair, I would use neither and just reference the property directly. – Ja͢ck May 04 '13 at 15:49
1

Use each() to iterate through elements returned by selector and assign ids. Numeric id is generally not considered a good practice you prefix of postfix with some string.

 $('input[type=checkbox]').each(function(i){
   $(this).attr('id',"id_"+i)
 })
Adil
  • 146,340
  • 25
  • 209
  • 204
0

use this:

$(document).ready(function() {
   var count = 1;
   $("input[type='checkbox']").each(function(index,domobj) {
      $(domobj).prop("id",count++);
   });
});

use .prop() when your jquery is 1.6+
use .attr() when your jquery is 1.6-