Comprobar checkbox seleccionados con jQuery

Para comprobar si un checkbox esta seleccionado hay que comprobar la propiedad/atributo checked del <input type="checkbox"/>, y esto se puede hacer o bien comprobando el valor de la propiedad o atributo con .prop() o .attr() para versiones antiguas de jQuery o con la función .is(selector).

Comprobar si un checkbox esta seleccionado

Con .prop() y .attr() se puede recuperar el valor de una propiedad de un elemento, por lo tanto simplemente necesitamos comprobar el valor de la propiedad checked (true => seleccionado / false => deseleccionado).

Otra opción es usar la función .is(selector) que comprueba si un elemento «encaja» con el selector indicado, (ej. $('input[type=checkbox]').is('input') => true y $('input[type=checkbox]').is('li') => false), usando el pseudo clase :checked se puede hacer la comprobación de si esta seleccionado o no.

// Comprobacion usando .prop() (jQuery > 1.6)
if ($('#dia1').prop('checked') ) {
    console.log("Checkbox seleccionado");
}

// Comprobacion usando .attr() (jQuery < 1.6)
if ($('#dia1').attr('checked') ) {
    console.log("Checkbox seleccionado");
}

// Comprobacion usando funcion .is()
if ($('#dia1').is(':checked') ) {
    console.log("Checkbox seleccionado");
}

Controlar cuando se selecciona/deselecciona un checkbox

El evento que se debe comprobar para poder controlar cuando se selecciona/deselecciona un checkbox es el change, el evento click también es válido para la mayoría de los casos ya que el desencadenante habitual del cambio de estado de un checkbox suele ser un click del usuario.

Utilizando cualquiera de los métodos anteriores dentro del handler del evento change podemos filtrar cuando se esta seleccionado o deseleccionado y ejecutar la función precisa en cada caso.

// Comprobar cuando cambia un checkbox
$('input[type=checkbox]').on('change', function() {
    if ($(this).is(':checked') ) {
        console.log("Checkbox " + $(this).prop("id") +  " (" + $(this).val() + ") => Seleccionado");
    } else {
        console.log("Checkbox " + $(this).prop("id") +  " (" + $(this).val() + ") => Deseleccionado");
    }
});

// Comprobar cuando se deseleciona un checkbox
$('input[type=checkbox]:checked').on('change', function() {
    console.log("Checkbox " + $(this).prop("id") +  " (" + $(this).val() + ") => Deseleccionado");
});

Obtener todos los checkbox seleccionados

Para obtener todos los checkox seleccionados hay que hacer uso de la pseudo clase :checked para recorrer todos los checkbox seleccionados.

$('input[type=checkbox]:checked').each(function() {
    console.log("Checkbox " + $(this).prop("id") +  " (" + $(this).val() + ") Seleccionado");
});

Finalmente, todo aquí puedes comprobar todo unido.

See the Pen Comprobar checkbox seleccionados con jQuery by Ivan Salas (@isc7) on CodePen.