Multiple checkbox javascript check status detection

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!

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

Adil · Accepted Answer · 2012-10-27 07:26:54Z

4

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

edited Oct 27, 2012 at 7:26

answered Oct 27, 2012 at 7:07

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

crazymao Over a year ago

That is awesome! Thanks :D one quick question though, I create the checkboxes using document.getElementById('').innerHTML += but they dont work, regular html does but those dont and they break the other ones too, any ideas why?

SolidRegardless Over a year ago

you probably have to rebind the click listener. New elements that are created after the binding will not be bound to, even if they share the same class.

Nope · Accepted Answer · 2012-10-27 07:17:59Z

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

Jukka K. Korpela · Accepted Answer · 2012-10-27 07:45:26Z

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.

Collectives™ on Stack Overflow

Multiple checkbox javascript check status detection

3 Answers 3

2 Comments

DEMO

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related