Compruebe si todas las casillas de verificación están seleccionadas

139

¿Cómo verifico si todas las casillas de verificación class="abc"están seleccionadas?

Necesito verificarlo cada vez que uno de ellos está marcado o desmarcado. ¿Lo hago al hacer clic o cambiar?

jquery

— Papa Noel
fuente

257

Creo que la forma más fácil es verificar esta condición:

$('.abc:checked').length == $('.abc').length

Puede hacerlo cada vez que se marca una nueva casilla de verificación:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});

— cbrandolino
fuente

2

lengthno es una función, creo que quisiste decir ..size()

— Jishnu AP

3

Gracias @TheSuperTramp! Quise decir length, pero nunca olvido que es una propiedad y no un método. Corregido

— cbrandolino

97

$('input.abc').not(':checked').length > 0

— Porco
fuente

2

Solución perfecta, limpia y elegante. "if ($ ('input.abc'). not (": checked "). length) {...}" también funciona.

— Skorunka František

1

Esa respuesta no es correcta. Verifica si hay alguna casilla marcada. Pero la pregunta es Verificar si todas las casillas están seleccionadas . Por lo que el código correcto es: $('input.abc').not(':checked').length === 0.

— hlcs

1

Esta respuesta es mejor que la respuesta aceptada si considera el rendimiento. Esto se repetirá solo una vez, en lugar de dos.

— Maarten Kieft

15

Puedes usar change()

$("input[type='checkbox'].abc").change(function(){
    var a = $("input[type='checkbox'].abc");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }
});

Todo lo que hará es verificar que el número total de .abccasillas coincida con el número total de .abc:checked.

Ejemplo de código en jsfiddle .

— Mark Coleman
fuente

No estoy seguro de por qué, pero mi longitud de a me da un valor de 8 mientras tengo solo 4 casillas de verificación.

— santa

El filteres una buena solución para un grupo de casillas de verificación, gracias mucho.

— Overallduka

5

$('.abc[checked!=true]').length == 0

— manji
fuente

3

Parte 1 de tu pregunta:

var allChecked = true;
$("input.abc").each(function(index, element){
  if(!element.checked){
    allChecked = false;
    return false;
  } 
});

EDITAR:

La respuesta (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) anterior es probablemente mejor.

— Dave L.
fuente

1

El criterio de búsqueda es uno de estos:

input[type=checkbox].MyClass:not(:checked)
input[type=checkbox].MyClass:checked

Probablemente quiera conectarse al evento de cambio.

— Steve Wellens
fuente

1

Alternativamente, también podría haber usado every ():

// Cache DOM Lookup
var abc = $(".abc");

// On Click
abc.on("click",function(){

    // Check if all items in list are selected
    if(abc.toArray().every(areSelected)){
        //do something
    }

    function areSelected(element, index, array){
        return array[index].checked;
    }
});

— Nick Cordova
fuente

1

Una solución independiente de clase

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}

— PHPer
fuente

1

Así es como lo logré en mi código:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}

— Jaime Montoya
fuente