jQuery Array of all selected checkboxes (by class)

Question

Possible Duplicate:
Select values of checkbox group with jQuery

In HTML I have a set of checkboxes grouped together by a class. I want to get an array in jQuery containing all the checkboxes that are selected/checked for that class (so other checkboxes on the page are ignored).

So HTML code like this:

<input type="checkbox" class="group1" value="18" checked="checked" />
<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group2" value="14" />
<input type="checkbox" class="group1" value="55" checked="checked" />
<input type="checkbox" class="group1" value="10" checked="checked" />
<input type="checkbox" class="group2" value="77" checked="checked" />
<input type="checkbox" class="group1" value="11" />

Would return the values of the checked/selected group1 checkboxes into an array like this:

var values = [ 18, 55, 10 ];

score 205 · Accepted Answer · answered Jan 20 '10 at 05:08

205

You can use the :checkbox and :checked pseudo-selectors and the .class selector, with that you will make sure that you are getting the right elements, only checked checkboxes with the class you specify.

Then you can easily use the Traversing/map method to get an array of values:

var values = $('input:checkbox:checked.group1').map(function () {
  return this.value;
}).get(); // ["18", "55", "10"]

answered Jan 20 '10 at 05:08

Christian C. Salvadó

807,428
183
922
838

How would you do this using the elements name instead of a class? – user387049 Nov 17 '11 at 20:59
6

Used this for reference, thanks. And to answer the last comment, use selector: $('input:checkbox[name=SOMENAME]') – Kyle Macey Jan 18 '12 at 19:46
@user387049 you may use it so (assume sector4 being the name of checkbox array): `$("input[name='sector4[]']:checkbox:checked").each(function() { });` – Azmeer Jan 09 '16 at 00:37
I didn't need to use `.get()` at all and worked fine. To be honest, use it throwed an error. It should be a jquery version related issue. – sdlins May 10 '16 at 20:05
How can I make it so that it gives me that in the `change` function? Thanks – Si8 Feb 13 '17 at 16:10

score 32 · Answer 2 · edited Nov 14 '12 at 13:25

32

var matches = [];
$(".className:checked").each(function() {
    matches.push(this.value);
});

edited Nov 14 '12 at 13:25

par

17,361
4
65
80

answered Jan 20 '10 at 05:08

Anurag

140,337
36
221
257

...will give you a jQuery object, and not an array. – Stefan Kendall Jan 20 '10 at 05:08
thanks Stefan, didn't realize an array of values was needed :) – Anurag Jan 20 '10 at 05:17

score 5 · Answer 3 · answered Jun 10 '12 at 15:47

5

You can also add underscore.js to your project and will be able to do it in one line:

_.map($("input[name='category_ids[]']:checked"), function(el){return $(el).val()})

answered Jun 10 '12 at 15:47

Artemk

59
1
2

2

“one line”; that’s one *very long* line… – Jezen Thomas Jun 10 '15 at 14:03

jQuery Array of all selected checkboxes (by class)

3 Answers3

Linked