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!

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!

• javascript
• jquery
• html
• checkbox

• see following link...stackoverflow./questions/1668673/… – Amol Kolekar Commented Oct 27, 2012 at 7:09

3 Answers 3

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

But that only handles one checkbox and doesn't work if I have more than one like above.

That is because when using the id selector, jQuery only returns the first element it finds. Ids should be unique.

As per documentation :

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

If you need to group elements you can either assign a class:

<input type="checkbox" id="check1" class="checkbox-group1">
<input type="checkbox" id="check2" class="checkbox-group1">
<input type="checkbox" id="check3" class="checkbox-group1">

...attaching the click event selecting by class:

$('.checkbox-group1').click(function(){...})

or you can use data attributes:

<input type="checkbox" id="check1" data-group="checkbox-group1">
<input type="checkbox" id="check2" data-group="checkbox-group1">
<input type="checkbox" id="check3" data-group="checkbox-group1">

...attaching the click event selecting by data attribute:

$('input[data-group="checkbox-group1"]').click(function(){...})

DEMO

The markup is invalid (as a markup validator would tell you): the id attribute values must be unique in a document. For checkboxes, the id attribute is mostly used for associating the control with its label, as in <input type="checkbox" id="sugar" name="addon" value="sugar"><label for="sugar">Sugar</label>.

So you need something else to refer to your checkboxes. To refer to all checkboxes on a page, you could use $('input[type=checkbox]'). But if you wish to handle a specific set of checkboxes in a certain way, the most natural way is probably to use the same name attribute in them, say

<input type="checkbox" name="addon" value="sugar">
<input type="checkbox" name="addon" value="cream">
<input type="checkbox" name="addon" value="milk">

and use $('[name=addon]'). Note that in this approach, the data submitted will contain fields like addon=sugar, addon=cream etc. instead of fields like 1=on, 2=on etc. which is what you get by using name without value.