use jQuery to get values of selected checkboxes

I want to loop through the checkboxgroup 'locationthemes' and build a string with all selected values. So when checkbox 2 and 4 are selected the result would be: "3,8"

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

I checked here: http://api.jquery.com/checked-selector/ but there's no example how to select a checkboxgroup by its name.

How can I do this?

Solution 1:

In jQuery just use an attribute selector like

$('input[name="locationthemes"]:checked');

to select all checked inputs with name "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Demo

In VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Demo

In ES6/spread operator

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Demo

Solution 2:

$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

Working Demo

OR

Use jQuery's is() function:

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

​

Solution 3:

Map the array is the quickest and cleanest.

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

will return values as an array like:

array => [2,3]

assuming castle and barn were checked and the others were not.

Solution 4:

$("#locationthemes").prop("checked")