Question

I’ve got about twenty checkboxes that are dynamically created with the following pattern:

<input type="checkbox" id="cb01" name="vehicle" />

I give it an ID of cb + index and a name attribute that corresponds to a database entry.

So over to my question:

Whats the best way to loop through the checkboxes performance wise? I need to send both the name and the value of the checkbox.

I would prefer the data as a jsonstring..

Answer 1

First, I’d give them all a common class. Let’s say cb.

Then:

var json = {};
var checkboxes = document.querySelectorAll('.cb');
for ( var i = 0, l = checkboxes.length; i < l; i++ )
    json[ checkboxes[i].name ] = checkboxes[i].checked;

Or with jQuery:

var json = {};
$('.cb').each(function(){
    json[ this.name ] = this.checked;
});