Introducción

jQuery es un framework que todavía (en pleno 2018) es muy utilizado por muchísimos programadores. Al trabajar en checkboxes, entradas de tipo checkbox o cajas de selección es muy probable que nos preguntemos cómo obtener el valor o estado de cada campo.

También puede que necesitemos cambiar el valor. Es decir, seleccionar una caja de texto en jQuery. Finalmente veremos cómo detectar cuando el estado de un checkbox cambia, es decir, que el usuario lo marque o lo desmarque.

¿Qué es un checkbox?

Antes de continuar; y para no confundir al usuario, hablamos de una caja de selección o checkbox, como el siguiente:

Haz click aquí

Ahora sí comencemos.

Obtener el estado/valor de un checkbox

Para esto, debemos tener nuestro elemento de jQuery que representa al input. Por ejemplo, podemos tener algo así:

<input id="mi_caja" type="checkbox">

Y para obtener su valor, llamamos al método is y le pasamos como argumento la cadena “:checked” así:

var estaSeleccionado = $('#mi_caja').is(":checked");

Aquí un ejemplo:

Establecer valor/estado

Ahora veamos cómo cambiar el valor de una caja de selección. Para ello, ahora utilizamos el método prop. El primer argumento será la cadena “checked” y el segundo una variable booleana para indicar si queremos marcarlo o desmarcarlo.

Marcar un checkbox

$("#mi_caja").prop("checked", true);

Desmarcar un checkbox

$("#mi_caja").prop("checked", false);

Ejemplo

He aquí un pequeño plunker:

Escuchar cambios

Para terminar este post, veremos cómo escuchar cuando el usuario selecciona o des-selecciona una caja de texto. En este caso simplemente adjuntamos una función que será llamada en el evento change del input. Así:

$("#mi_caja").change(function() {
    alert("Cambio");
  });

Plunker de ejemplo:

Y con eso terminamos 🙂