jQuery es un framework de Javascript que puede simplificar la codificación de Javascript para un sitio web y elimina muchos problemas de compatibilidad entre navegadores. Ayer miré cómo obtener y establecer valores de elementos de formulario con jQuery, pero no manejé las casillas de verificación. La publicación de hoy analiza cómo saber si una casilla de verificación de formulario HTML está marcada o no con jQuery y luego cómo cambiarla para que no esté marcada.
Formulario de ejemplo
Nuestro formulario de ejemplo se ve así:
<input type="checkbox" name="foo" value="bar" /><input type="button" onclick="show_checked()" value="Show" /><input type="button" onclick="set_checked(true)" value="On" /><input type="button" onclick="set_checked(false)" value="Off" />
Hay una casilla de verificación con el nombre » foo » y luego tres botones. El primero llama a una función para mostrarnos si la casilla de verificación está marcada o no, y los dos segundos la cambian de estar marcada a no estar marcada.
Compruebe si la casilla de verificación está marcada
Hay varias maneras de averiguar si una casilla de verificación está marcada o no con jQuery, y aquí un par de alternativas. Cada uno devolverá true si está marcado o false si no lo está.
$('input').is(':checked')$('input').attr('checked')
Establezca la casilla de verificación en marcada o no marcada
El estado de la casilla de verificación se puede cambiar usando la función attr () de esta manera, para marcar la casilla:
$('input').attr('checked', true);
y así desmarcar la casilla:
$('input').attr('checked', false);
Ejemplo de trabajo
Y finalmente, aquí está el formulario de ejemplo en acción:
Una nota sobre los valores booleanos
Hay una discusión en los comentarios a continuación sobre los problemas encontrados con Chromium que pueden estar relacionados con los valores de cadena de verdadero y falso que se pasan, mientras que debe ser estrictamente un verdadero o falso booleano, de lo contrario pueden ocurrir consecuencias inesperadas.
Se ha sugerido su uso .removeAttr () en su lugar, pero esto puede tener otras consecuencias de mi lectura de los comentarios en la página de documentación de jQuery para la función. Seguiré esta publicación en una fecha posterior y haré más pruebas para confirmar con seguridad
Activar una casilla de verificación al hacer clic en una etiqueta
Tenga en cuenta que Javascript no es necesario para activar una casilla de verificación al hacer clic en un texto; para eso están HTML <etiqueta>s. Lea mi publicación de seguimiento usando HTML < etiqueta> para alternar y seleccionar campos para obtener más información.