Sélectionnez les valeurs de groupe de cases à cocher avec jQuery

Question

Je suis l'aide de Zend_Form à la sortie d'un jeu de groupe de cases à cocher:

<label style="white-space: nowrap;"><input type="checkbox" name="user_group[]" id="user_group-20" value="20">This Group</label>

Avec un HTTP Post ces valeurs sont transmises sous forme de matrice, mais quand je suis un peu perplexe sur la façon de saisir toutes les valeurs à l'aide de jQuery. J'ai pensé que je pouvez sélectionner le groupe à l'aide de:

$("input[@name='user_group[]']").val()

mais que vient saisit la valeur de la première case à cocher dans la liste, indépendamment de si elle est cochée ou non. Des idées?

Answer 1

Vous pouvez utiliser l'objet sélecteur de récupérer uniquement ceux sélectionnés (en niant la nécessité de connaître le nombre ou pour effectuer une itération sur vous même):

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

Avec ces éléments cochés, vous pouvez créer une collection de ces valeurs ou de faire quelque chose à la collection:

var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
  values.push($(this).val());
  // or you can do something to the actual checked checkboxes by working directly with  'this'
  // something like $(this).hide() (only something useful, probably) :P
});

Answer 2

Je ne suis pas sûr de la "@" utilisé dans le sélecteur. Au moins avec la dernière jQuery, j'ai dû enlever le @ pour obtenir que cela fonctionne avec deux types de case des tableaux, sinon tous les éléments cochés ont été sélectionnés pour chaque tableau:

var items = [];
$("input[name='items[]']:checked").each(function(){items.push($(this).val());});

var about = [];
$("input[name='about[]']:checked").each(function(){about.push($(this).val());});

Maintenant, à la fois, les éléments et sur le travail.

Answer 3

Utiliser .map() (adapté à partir de l'exemple à http://api.jquery.com/map/):

var values = $("input[name='user_group[]']:checked").map(function(index,domElement) {
    return $(domElement).val();
});

Answer 4

Avec map , au lieu de each il est possible d'éviter la création de la matrice de l'étape:

var checkedCheckboxesValues = 
    $('input:checkbox[name="groupName"]:checked')
        .map(function() {
            return $(this).val();
        }).get();

De la map() page de la documentation:

Passer chaque élément dans l'actuel ensemble au travers d'une fonction, la production d'un nouvel objet jQuery contenant les valeurs de retour

get() convertit ces valeurs dans un tableau.