jQuery Array of all selected checkboxes (by class) [duplicate]

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 ];

Christian C. Salvadó · Accepted Answer · 2010-01-20 05:08:57Z

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, 2010 at 5:08

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

5 Comments

user387049 Over a year ago

How would you do this using the elements name instead of a class?

Kyle Macey Over a year ago

Used this for reference, thanks. And to answer the last comment, use selector: $('input:checkbox[name=SOMENAME]')

Azmeer Over a year ago

@user387049 you may use it so (assume sector4 being the name of checkbox array): $("input[name='sector4[]']:checkbox:checked").each(function() { });

sdlins Over a year ago

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.

Si8 Over a year ago

How can I make it so that it gives me that in the change function? Thanks

par · Accepted Answer · 2012-11-14 13:25:30Z

32

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

edited Nov 14, 2012 at 13:25

par

17.8k4 gold badges68 silver badges86 bronze badges

answered Jan 20, 2010 at 5:08

Anurag

142k37 gold badges223 silver badges262 bronze badges

2 Comments

Stefan Kendall Over a year ago

...will give you a jQuery object, and not an array.

Anurag Over a year ago

thanks Stefan, didn't realize an array of values was needed :)

Artemk · Accepted Answer · 2012-06-10 15:47:59Z

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, 2012 at 15:47

Artemk

591 silver badge2 bronze badges

1 Comment

Jezen Thomas Over a year ago

“one line”; that’s one very long line…

Collectives™ on Stack Overflow

jQuery Array of all selected checkboxes (by class) [duplicate]

3 Answers 3

5 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Linked

Related