Ottieni un elenco di caselle di controllo selezionate in un div utilizzando jQuery

231

Voglio ottenere un elenco di nomi di caselle di controllo che sono selezionate in un div con un determinato ID. Come lo farei usando jQuery?

Ad esempio, per questo div voglio ottenere array ["c_n_0"; "c_n_3"] o una stringa "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
fonte

434

Combinazione di due risposte precedenti:

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

— Alex LE
fonte

10

e un'altra combo: var selected = $ ('# checkboxes input: checked'). map (function (i, el) {return el.name;}). get (); // aggiungi .join (';') per ottenere una stringa combinata

— roberkules il

1

@Alex LE. Come ottengo solo il conteggio delle caselle di controllo selezionate? Devo solo verificare se una delle caselle di controllo all'interno del div è selezionata o meno.

— ashishjmeshram,

1

@Ashish. Basta scrivere: var count = $ ('# checkboxes input: checked'). Length;

— Alex LE,

2

Chiamata non necessaria del costruttore var selected = new Array();. Meglio (più economico) convar selected = [];

— Pono

Come posso ottenerlo in changefunzione?

— Si8,

54

Questo farebbe?

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

— nikc.org
fonte

9

$ (questo) .controllato non funziona. Utilizzare if ($ (this) .attr ('checked')) or if ($ (this) .is (': checked'))

— Stefan Steiger

se .attr('checked')o .prop('checked')o .is(':checked')non funziona, provare.get(0).checked

— EMFI

37

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

ti darà una serie di elementi stessi. Se hai semplicemente bisogno dei nomi:

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

— Corey
fonte

2

Penso che dovrebbe essere restituire this.name o return $ (this) .attr ('name');

— Jansen Price,

4

$("#checkboxes :checked").map(...)sarebbe più conciso. Come sottolinea Jansen, dovrebbe essere $(this).attr("name"); ma considererei un semplice this.nameche dovrebbe essere altrettanto compatibile.

— Alex Barrett,

1

Questo è stato fantastico per la semplice mappa. Ho cambiato childrenper findsembrare più profondo, e avevo bisogno di attributi jquery così usati $(this) (e ho scritto questo commento per quando vengo di nuovo a guardare ...)

— arrivederci

24

Avevo bisogno del conteggio di tutte le caselle che sono selezionate. Invece di scrivere un ciclo ho fatto questo

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

Confronta con il numero totale di caselle di controllo per vedere se sono uguali. Spero che possa aiutare qualcuno

— Usman Shaukat
fonte

9

Questo funziona per me.

var selecteditems = [];

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

— Ricardo
fonte

6

Puoi anche dare loro lo stesso nome in modo che siano un array , ma dai loro valori diversi :

<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>

È quindi possibile ottenere solo il valore di solo quelli contrassegnati utilizzando la mappa :

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

— SharpC
fonte

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
fonte

0

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

— David Blanco
fonte

Qual è il vantaggio di questa soluzione?

— Luis Gouveia,