Obtenga una lista de casillas marcadas en un div usando jQuery

231

Quiero obtener una lista de nombres de casillas de verificación que se seleccionan en un div con cierta identificación. ¿Cómo haría eso usando jQuery?

Por ejemplo, para este div quiero obtener una matriz ["c_n_0"; "c_n_3"] o una cadena "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
fuente

434

Combinación de dos respuestas anteriores:

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

— Alex LE
fuente

10

y otro combo: var selected = $ ('# checkboxes input: check'). map (function (i, el) {return el.name;}). get (); // agregue .join (';') para obtener una cadena combinada

— roberkules

1

@Alex LE. ¿Cómo obtengo solo el recuento de las casillas seleccionadas? Solo necesito verificar si alguna de las casillas de verificación dentro del div está marcada o no.

— ashishjmeshram

1

@Ashish. Simplemente escriba: var count = $ ('# checkboxes input: check'). Length;

— Alex LE

2

Llamada innecesaria del constructor var selected = new Array();. Mejor (más barato) convar selected = [];

— Pono

¿Cómo lo pongo en changefuncionamiento?

— Si8

54

¿Haría esto?

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

— nikc.org
fuente

99

$ (this) .checked no funciona. Use if ($ (this) .attr ('marcado')) o if ($ (this) .is (': marcado'))

— Stefan Steiger

si .attr('checked')o .prop('checked')o .is(':checked')no funciona, prueba.get(0).checked

— EMFI

37

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

le dará una serie de elementos en sí mismos. Si solo necesita específicamente los nombres:

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

— Corey
fuente

2

Creo que debería ser return this.name o return $ (this) .attr ('name');

— Jansen Price

44

$("#checkboxes :checked").map(...)Sería más conciso. Como señala Jansen, debería ser $(this).attr("name"); pero consideraría un simple this.nameque debería ser igual de compatible.

— Alex Barrett

1

Esto fue genial para el mapa simple. He cambiado childrena findmirar más profundamente, y jQuery necesaria atributos tan acostumbrado $(this) (y escribí este comentario para cuando llego a mirar de nuevo ...)

— goodeye

24

Necesitaba el recuento de todas las casillas de verificación que están marcadas. En lugar de escribir un bucle, hice esto

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

Compárelo con el número total de casillas de verificación para ver si son iguales. Espero que ayude a alguien

— Usman Shaukat
fuente

9

Esto funciona para mi.

var selecteditems = [];

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

— Ricardo
fuente

6

También podría darles a todos el mismo nombre para que sean una matriz , pero asígneles valores diferentes :

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

Entonces puede obtener solo el valor de solo los marcados usando map :

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

— SharpC
fuente

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
fuente

0

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

— David Blanco
fuente

¿Cuál es la ventaja de esta solución?

— Luis Gouveia