Usando jquery para obtener todas las casillas marcadas con un cierto nombre de clase

215

Sé que puedo obtener todas las casillas marcadas en una página usando esto:

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

Pero ahora estoy usando esto en una página que tiene otras casillas de verificación que no quiero incluir. ¿Cómo cambiaría el código anterior para ver solo las casillas marcadas que tienen una determinada clase?

leora
fuente
¿Debo actualizar el título para decir en classlugar de name?
Russ Cam
@Russ Cam - ya hecho
leora
$ ('input [type = checkbox] :checked') también funcionará.
súper genial

Respuestas:

392

$('.theClass:checkbox:checked')le dará todas las casillas marcadas con la clase theClass.

Cokegod
fuente
8
Agradable. Además, $ ('. TheClass: checkbox: not (: checked)') obtendrá todos los no marcados.
Venugopal M
¿Puedo hacer esto para todas las casillas de verificación con nombre?
FluffyBeing
¿Cómo puedo agregar otra clase en elementos marcados? Quiero mostrar el borde en los elementos de entrada marcados.
Najam Us Saqib
120
$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

Un ejemplo para demostrar.

:checkboxes un selector para casillas de verificación (de hecho, podría omitir la inputparte del selector, aunque encontré casos de nicho en los que obtendría resultados extraños al hacer esto en versiones anteriores de la biblioteca. Estoy seguro de que se solucionan en versiones posteriores). .classes el selector para el atributo de clase de elemento que contiene class.

Russ Cam
fuente
99
Jquery señala: la casilla de verificación recomienda seguir con [type = "checkbox"]. $ ('[type = "checkbox"]. class') .... o $ ('input [type = "checkbox"]. class')
TSmith
@TSmith, ¿tienes alguna referencia?
Russ Cam
99
Lo leí desde aquí: api.jquery.com/checkbox-selector ... en "Notas adicionales"
TSmith
73

.mapEjemplo obligatorio :

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));
karim79
fuente
3
$ ('input.theClass: check'). map (function () {return this.value}). get (). join (',');
Fedir RYKHTIK
@Fedir: su comando da on,oncomo resultado ('activado' para cada casilla marcada)
Jay
@ Jay Debe establecer los atributos de valor de sus casillas de verificación para obtener su valor en una cadena separada por coma
Kamran Ali
21
$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

Esto obtendría todas las casillas de verificación del nombre de clase "yourClass". Me gusta este ejemplo, ya que utiliza el selector jQuery marcado en lugar de hacer una verificación condicional. Personalmente, también usaría una matriz para almacenar el valor, luego los usaría según sea necesario, como:

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});
alienriver49
fuente
Si hubiera una necesidad de almacenar los valores en una matriz, .mappodría ser una alternativa más agradable, como lo ilustra la respuesta de karim79.
duplode
1
gracias :) necesitaba encontrar todas las casillas marcadas y su respuesta lo hace.
ufk
13

Si necesita obtener el valor de todas las casillas marcadas como una matriz:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()
Faraz Kelhini
fuente
10
 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });
Montaña
fuente
8

No estoy seguro de si es útil para su caso particular, y no estoy seguro de si en su caso, las casillas de verificación que desea incluir solo son parte de un solo formulario o div o tabla, pero siempre puede seleccionar todas las casillas de verificación dentro de un elemento específico. Por ejemplo:

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

Luego, usando el siguiente jQuery, SOLO pasa por las casillas de verificación dentro de ese UL con id = "selectivo":

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});
Florian Mertens
fuente
7

Puede usar algo como esto:
HTML:

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>


JQuery:

$(".yourClass:checkbox").filter(":checked")


Escogerá valores de 1 y 3.

Philip Voloshin
fuente
Esta es la mejor respuesta.
Marcos Buarque
7

Manera simple de obtener todos los valores en una matriz

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);
Caike Bispo
fuente
7

Puedes intentarlo así

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();
Bablu Ahmed
fuente
4
<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<input type="button" id="demo" value = "Demo" />

<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        $("input:checkbox[class=chk]:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
    });
</script>

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx

Debendra Dash
fuente
3

Sé que esto tiene un montón de excelentes respuestas a esta pregunta, pero lo encontré mientras navegaba y me resulta muy fácil de usar. Pensé que compartiría para cualquiera que esté mirando.

HTML:

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

jQuery:

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

Referencia: más fácil "Verificar todo" con jQuery

Tony
fuente
1
$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});
kapil sarvesh
fuente
considere agregar un comentario para explicar su respuesta para que sea más fácil de entender para los no iniciados
Simas Joneliunas
-1
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()
KEERTHI KN
fuente
1
explique de qué se trata este código. Ayudará a otros a entender
Shafin Mahmud