Podemos verificar el estado de una casilla de verificación usando el selector jQuery :checked junto con la función jQuery is. Por ejemplo: $(‘#el’).is(‘:checked’).
Como en muchas cosas de la vida, hay muchas formas de hacer lo mismo, y este caso no es diferente. Hay diferentes formas en que podemos verificar si la casilla de verificación está marcada o no, luego depende de usted elegir la que mejor se adapte a su caso de uso.
Su navegador no soporta la etiqueta de vídeo.
1. Verificar si una casilla de verificación está marcada usando es
De hecho, esta es la forma en que recomendaría a cualquiera que use jQuery:
if( $('#el').is(':checked') ){
alert("Checkbox Is checked");
}
else{
alert("Checkbox Is not checked");
}¿Entonces, cómo funciona? El es metodo de jQuery nos proporciona una forma de hacer coincidir uno o varios elementos con un selector, un objeto de jQuery o un elemento determinado. Devuelve verdadero si al menos un elemento coincide. agradable eh?
Así que aquí estamos seleccionando nuestro elemento de casilla de verificación con $(‘#el’) y preguntando a jQuery si coincide con el selector :checked.
2. Verificar si una casilla de verificación está marcada usando prop
jQuery proporciona un método de utilería que podemos usar para obtener la propiedad del elemento JavaScript. Dado que marcada es una propiedad de JavaScript del tipo de casilla de verificación de las entradas con tipo=”casilla de verificación”, podemos hacer lo siguiente para recuperarla:
$('#el').prop('checked');
Y, como antes, podemos usar el booleano devuelto en nuestras condiciones, asignarlo a una variable, mostrarlo, etc.
3. Verificar si una casilla de verificación está marcada usando un selector
Otra forma menos elegante de examinar el estado de nuestro elemento es usando el jQuery: selector marcado directamente en él y luego ver si jQuery recupera algún elemento. Usamos el método .length para ver cuántos elementos se devuelven.
Entonces, nuestra condición será verdadera siempre que tengamos 1 o más elementos devueltos por nuestro selector. Y debido a que 0 se evalúa como falso, si encontramos 0 elementos, la condición no se cumplirá.
Aquí hay un ejemplo:
if( $('#el:checked').length) ) {
alert('Is checked!');
}
4. Comprobar si una casilla de verificación está marcada con JavaScript
Debido a que jQuery es solo otra capa sobre JavaScript y nos proporciona una forma de acceder directamente al objeto de JavaScript, podemos usar JavaScript puro para examinar el estado.
Podemos acceder al objeto JavaScript usando corchetes [0] o usando .get(0). Ambos hacen exactamente lo mismo.
Luego solo accedemos directamente a la propiedad marcada. Devolverá un valor booleano que luego podemos usar como antes:
if( $('#el')[0].checked ){
alert("Checkbox is checked!");
}
if( $('#el').get(0).checked ){
alert("Checkbox is checked!");
}
No use attr para verificar el estado de la casilla de verificación
No use la función jQuery attr para verificar el estado actual de una casilla de verificación. Este es un error común que cometen algunos desarrolladores y que seguramente generará problemas.
El elemento de casilla de verificación HTML, que es básicamente una entrada con tipo=”casilla de verificación”, puede contener un atributo en línea para determinar si la casilla de verificación aparecerá marcada al cargar la página o no.
<input type="checkbox" name="test" id="el" checked>
<input type="checkbox" name="test" id="el">
Podemos acceder a los atributos usando jQuery cuando usamos la función attr. Pero este es el trato: el atributo aún se verificará incluso cuando el usuario lo haya cambiado después. El atributo no refleja el estado de la casilla de verificación. Solo refleja el valor predeterminado en la carga de la página.
Así que hacer lo siguiente es un gran error que quieres evitar a toda costa:
if( $('#el').attr('checked') ){
console.log("Is checked!");
}
Conclusión
No importa de qué manera elijas verificar si una casilla de verificación está marcada mientras te funcione. Solo recuerde evitar usar la opción attr, ya que eso conducirá a escenarios no deseados.
Ahora que ha aprendido a dominar los métodos de jQuery para obtener el estado de un elemento HTML, puede hacer lo mismo con otros elementos HTML. Por lo general, cada atributo de estado tiene su propia propiedad de JavaScript a la que puede acceder de la misma manera.
Si está aprendiendo JavaScript, ¡vea cuál es la mejor manera de aprender JavaScript!
Artículos relacionados
