use jQuery to get values of selected checkboxes

Question

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?

Answer 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