Para comprobar con jQuery si un checkbox está seleccionado podemos utilizar varios métodos. En la mayoría de situaciones cualquiera de las vías tiene el mismo resultado y la verdad es que no sabría decirte cuál es mejor sin ver el contexto exacto. En cualquier caso, se trata de comprobar el atributo o propiedad checked del elemento checkbox. Veamos como hacerlo.

1

Utilizando el método .prop()

Con el método .prop() podemos obtener el valor de la propiedad checked, que recordemos es un valor lógico (true/false).

if( $('.micheckbox').prop('checked') ) {
    alert('Seleccionado');
}

El método .prop() está disponible desde jQuery 1.6, en versiones anteriores hay que utilizar el método .attr():

if( $('.micheckbox').attr('checked') ) {
    alert('Seleccionado');
}

Propiedades y atributos no son exactamente lo mismo. En la mayoría de los casos es preferible el uso de .prop(), ya que refleja el estado actual del objeto DOM que representa al elemento HTML con el que estamos trabajando. En esta entrada de StackOverflow explican muy bien la diferencia entre propiedad y atributo.

2

Utilizando el método .is(selector)

El método .is(selector) permite comprobar si un elemento cumple con el selector especificado. Utilizándolo con el pseudo selector :checked podremos comprobar si el checkbox se encuentra seleccionado.

if( $('.micheckbox').is(':checked') ) {
    alert('Seleccionado');
}

El método .is() es especialmente útil dentro de callbacks ya que nos permite comprobar el estado del objeto del callback sin modificarlo y sin crear objetos nuevos (vea un ejemplo de este uso un poco más abajo, en el ejemplo de captura del evento de selección).

3

Obtener todos los checkboxes seleccionados

Para obtener todos los elementos checkbox que se encuentran seleccionados podemos utilizar el pseudo selector :checked. Por ejemplo:

$('.micheckbox:checked').each(
    function() {
        alert("El checkbox con valor " + $(this).val() + " está seleccionado");
    }
);

El código anterior obtendría todos los elementos .micheckbox (clase “micheckbox”) que se encuentren seleccionados, pero no específicamente elementos tipo checkbox (el selector :checked en jQuery coincide tanto con los elementos checked como con los elementos selected).  Podríamos limitarlo sólo a elementos checkbox, por ejemplo, del siguiente modo:

$("input:checkbox:checked").each(   
    function() {
        alert("El checkbox con valor " + $(this).val() + " está seleccionado");
    }
);
4

Capturar el evento de selección del checkbox

Hasta ahora hemos comprobado si el checkbox está seleccionado. Ahora, si queremos hacer algo justo cuándo el checkbox es seleccionado, tenemos que capturar ese momento. Hay muchos tutoriales que proponen el uso del evento click. Por ejemplo:

$( '.micheckbox' ).on( 'click', function() {
    if( $(this).is(':checked') ){
        // Hacer algo si el checkbox ha sido seleccionado
        alert("El checkbox con valor " + $(this).val() + " ha sido seleccionado");
    } else {
        // Hacer algo si el checkbox ha sido deseleccionado
        alert("El checkbox con valor " + $(this).val() + " ha sido deseleccionado");
    }
});

Sin embargo, creo que es mejor utilizar el evento change ya que es lanzado específicamente cuándo el checkbox cambia de estado, que es lo que buscamos, independientemente de si ha sido “cliqueado” o no. Un ejemplo básico tendría este pinta:

$(".micheckbox").on( 'change', function() {
    if( $(this).is(':checked') ) {
        // Hacer algo si el checkbox ha sido seleccionado
        alert("El checkbox con valor " + $(this).val() + " ha sido seleccionado");
    } else {
        // Hacer algo si el checkbox ha sido deseleccionado
        alert("El checkbox con valor " + $(this).val() + " ha sido deseleccionado");
    }
});

¿Más métodos? ¿Comentarios? Soy todo oídos.

  • Kirie

    Muchas gracias! Me ha servido.

  • Alan Hugo

    gracias!!

  • Diego

    Ando buscando la manera de trabajar con un evento que se desencadene al chequear un input de typo checkbox, alguien tiene idea de como hacerlo?

    • En general, un evento = función (o método). Tienes varios ejemplos en el post. ¿Qué es lo que no entiendes o dónde estás atrancado exactamente?

    • Kroneaux Schneider

      Estoy aprendiendo jQuery y lo que he aprendido es que para desencadenar una función cuando ocurre un evento es que debes utilizar la sentencia .on(‘evento’,function(){…}).

      Por ejemplo, para un checkbox, checar si está seleccionado sería algo como:
      $(‘input:checkbox#tu-id’).on(‘click’,function({ if$(this).is(‘:checked’){…} else{…}});

    • Ahh!! Ahora entiendo la pregunta de @Diego, no es desencadenar un evento si el checkbox está checked, sino capturar el evento de cambio de estado del checkbox para desencadenarlo cuándo es seleccionado.

      En este caso, yo no utilizaría el evento click como sugiere @Kroneaux Schneider, por que, aunque puede funcionar en la mayoría de los casos, no se desencadena específicamente cuándo el checkbox cambia de estado. Por ejemplo, si el checkbox es seleccionado mediante JavaScript, el evento click no ocurre. Por eso yo encadenaría mi evento al evento change para capturar el momento cuándo el valor de alguna propiedad del checkbox cambie:

      $(".checkbox").change( function() {
      if( this.checked ) {
      // Desencadena aquí tu evento
      }
      });

      Actualizaré el post con esta información.

    • Kroneaux Schneider

      Interesante, bueno, como mencioné al principio (leyéndolo otra vez me
      doy cuenta que en realidad no, jajaja) apenas empecé hace un par de
      semanas y bueno, no he usado el change en lugar de click como mencionas,
      pero según he leído es una mejor práctica hacer uso de .on en lugar de
      .click, .change y demás ya que .click en realidad llama a .on(‘click’,
      …) [según he leído] y .on te permite programar eventos sobre elementos
      generados dinámicamente, o sea, que no están cargados desde el
      principio en el DOM.

      Un link interesante al respecto (en inglés): http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click

      A propósito, cómo comentas con código?

    • Me pareció interesante el enlace que has pasado pero leyendo la documentación de jQuery .click, dice claramente que:

      .click( handler )

      Es un alias de:

      .on( "click", handler )

      Y en la documentación de .change dice que:

      .change( handler )

      Es un alias de:

      .on( "change", handler )

      Así que, según la documentación oficial son totalmente intercambiables, utilizar uno u otra expresión es totalmente a gusto del consumidor (salvo algunos casos que explican muy en el enlace que pasaste).

      Y también leyendo la documentación he visto que yo estaba equivocado. Cambiar el estado de un checkbox desde JavaScript no lanza el evento click pero tampoco lo hace change.

      De todas formas, lo importante que quería transmitir sigue siendo lo mismo: el evnto click no es adecuado para capturar el momento en el que un checkbox cambiar de estado entre seleccionado y deseleccionado.

      PD: syntax highlighting en los comentarios de Disqus

    • Diego

      Gracias @CybMeta:disqus efectivamente averiguando llegué a la manera en que mencionas y me fue muy útil, nuevamente te agradezco.

    • Diego

      Muchas gracias @kroneauxschneider:disqus

  • Vitmar

    buenazo..!! me ayudo gracias…

  • Yessey

    que bueno

  • Geniaaaal! Gracias por la Información! 🙂