jQuery Array of all selected checkboxes (by class)

JavascriptJqueryHtml

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionleepowersView Question on Stackoverflow
Solution 1 - JavascriptChristian C. SalvadóView Answer on Stackoverflow
Solution 2 - JavascriptAnuragView Answer on Stackoverflow
Solution 3 - JavascriptArtemkView Answer on Stackoverflow