Question

So basically I have a bunch of checkboxes on my page:

<input type="checkbox" id="check" name="1">
<input type="checkbox" id="check" name="2">
<input type="checkbox" id="check" name="3">

Now I need a javascript code to detect if a checkbox has been checked and then do something based on the name, I have this:

$('#check').click(function()...

But that only handles one checkbox and doesn’t work if I have more than one like above. I will possibly have alot of them so I would rather not check them one by one, any help would be greatly appreciated, thanks guys!

Answer 1

You are binding the click with id and all the three control have same id. You need to give the unique id to html control you better assign a common class to group them. I have changed the ids of checkboxes to make them unique.

<input type="checkbox" id="check1" name="1" class="someclass">
<input type="checkbox" id="check2" name="2" class="someclass">
<input type="checkbox" id="check3" name="3" class="someclass">


$('.someclass').click(function()...

To check the checked checkboxes

Live Demo

$('#btn').click(function() {
    $('.someclass').each(function() {
       alert("checkbox id =" + this.id + " checked status " + this.checked);
    });
});​

To check a group of checkbox on change of other checkbox

Live Demo

<input type="checkbox" id="check1" name="1" class="someclass">
<input type="checkbox" id="check2" name="2" class="someclass">
<input type="checkbox" id="check3" name="3" class="someclass">
<label> <input id="chkall" type="checkbox" text=""aa /> check all </label>
​

$('#chkall').click(function() {
    $('.someclass').attr('checked', this.checked);
});​