utiliser jQuery pour obtenir les valeurs des cases à cocher sélectionnées

Question

Je veux boucler le groupe de cases à cocher 'locationthemes' et construire une chaîne avec toutes les valeurs sélectionnées. Ainsi, lorsque les cases à cocher 2 et 4 sont sélectionnées, le résultat serait le suivant : "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>

J'ai vérifié ici : http://api.jquery.com/checked-selector/ mais il n'y a pas d'exemple pour sélectionner un groupe de cases à cocher par son nom.

Comment puis-je le faire ?

Answer 1

En jQuery, il suffit d'utiliser un sélecteur d'attribut comme

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

pour sélectionner toutes les entrées cochées portant le nom "locationthemes".

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

//or

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

Demo

---

En VanillaJS

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

Demo

---

Dans l'opérateur ES6/spread

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

Demo

Answer 2

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

Travail Demo

OU

Utilisez l'outil jQuery is() fonction :

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

Answer 3

Cartographier le tableau est le moyen le plus rapide et le plus propre.

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

retournera les valeurs sous forme de tableau comme :

array => [2,3]

supposant que le château et la grange ont été vérifiés et les autres non.

Answer 4

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

Answer 5

En utilisant la fonction map función

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});