Obtenez une liste des cases à cocher cochées dans un div à l'aide de jQuery

231

Je veux obtenir une liste des noms des cases à cocher qui sont sélectionnées dans une div avec un certain identifiant. Comment pourrais-je faire cela en utilisant jQuery?

Par exemple, pour ce div, je veux obtenir le tableau ["c_n_0"; "c_n_3"] ou une chaîne "c_n_0; c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

jquery checkbox jquery-selectors

— Juozas Kontvainis
source

434

Combinaison de deux réponses précédentes:

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

— Alex LE
source

10

et un autre combo: var selected = $ ('# checkboxes input: checked'). map (function (i, el) {return el.name;}). get (); // ajouter .join (';') pour obtenir une chaîne combinée

— roberkules

1

@Alex LE. Comment obtenir uniquement le nombre de cases à cocher sélectionnées? J'ai juste besoin de vérifier si l'une des cases à cocher à l'intérieur du div est cochée ou non.

— ashishjmeshram

1

@Ashish. Il suffit d'écrire: var count = $ ('# checkboxes input: checked'). Length;

— Alex LE

2

Appel inutile du constructeur var selected = new Array();. Mieux (moins cher) avecvar selected = [];

— Pono

Comment l'obtenir sur la changefonction?

— Si8

54

Est-ce que ça ferait?

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

— nikc.org
source

9

$ (this) .checked ne fonctionne pas. Utilisez si ($ (this) .attr ('vérifié')) ou if ($ (this) .is (': vérifié'))

— Stefan Steiger

si .attr('checked')ou .prop('checked')ou .is(':checked')ne fonctionne pas, essayez.get(0).checked

— EMFI

37

$("#checkboxes").children("input:checked")

vous donnera un tableau des éléments eux-mêmes. Si vous avez simplement besoin des noms:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

— Corey
source

2

Je pense que cela devrait être retourner this.name ou retourner $ (this) .attr ('name');

— Jansen Price

4

$("#checkboxes :checked").map(...)serait plus concis. Comme Jansen le fait remarquer, cela devrait l'être $(this).attr("name"); mais je considérerais un simple this.namequi devrait être tout aussi compatible.

— Alex Barrett

1

C'était génial pour la carte simple. J'ai changé childrenpour findregarder plus profondément, et j'avais besoin d'attributs jquery donc utilisés $(this) (et j'ai écrit ce commentaire pour quand je reviendrai ...)

— revoir

24

J'avais besoin du nombre de toutes les cases à cocher qui sont cochées. Au lieu d'écrire une boucle, je l'ai fait

$(".myCheckBoxClass:checked").length;

Comparez-le avec le nombre total de cases à cocher pour voir si elles sont égales. J'espère que cela aidera quelqu'un

— Usman Shaukat
source

9

Cela fonctionne pour moi.

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

— Ricardo
source

6

Vous pouvez également leur donner le même nom afin qu'ils soient un tableau , mais leur donner des valeurs différentes :

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

Vous pouvez alors obtenir uniquement la valeur de celles cochées uniquement en utilisant la carte :

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

— SharpC
source

0

function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);

     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

— jamaljaj
source

0

 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

— David Blanco
source

Quel est l'avantage de cette solution?

— Luis Gouveia