Podemos verificar el estado de un botón de radio usando el selector jQuery :checked junto con la función jQuery is. Por ejemplo: $(‘#el’).is(‘:checked’).
Es exactamente el mismo método que usamos para verificar cuando una casilla de verificación está marcada usando jQuery.
Su navegador no soporta la etiqueta de vídeo.
1. Verificar si un botón de radio está marcado usando es
Esta es la mejor y más recomendada forma de usar jQuery:
if( $('#radio').is(':checked') ){
alert("Radio Button Is checked!");
}
else{
alert("Radio Button Is not checked :( ");
}Lo que estamos haciendo aquí es hacer uso de la jQuery es método para comprobar si el elemento proporcionado coincide con un selector determinado, un objeto jQuery o un elemento. Devuelve verdadero si hay una coincidencia. Genial, ¿eh?
Básicamente, hacemos la selección de nuestro elemento usando $(‘#radio’) (asumiendo que nuestro elemento usa id=”radio”) y luego le preguntamos a jQuery si coincide con el selector :checked. (Lo que hará si la radio está activa)
Puedes jugar con este sencillo ejemplo:
2. Verificando si una radio está verificada usando prop
Por lo general, hay más de una forma de hacer las cosas y este caso no será diferente.
Debido a que jQuery también proporciona una forma de comprobar las propiedades de los elementos HTML, podemos hacer uso de la método de utilería para comprobar la propiedad marcada:
$('#radio').prop('checked');
Y, como antes, podemos usar el booleano devuelto en nuestras condiciones, asignarlo a una variable, mostrarlo, etc.
3. Verificar si un botón de radio está marcado usando un selector
Aquí hay otra forma menos recomendada de verificar el estado de un botón de opción.
Consiste en usar directamente un selector con la propiedad :checked para intentar encontrar el botón de radio activo en el DOM. Si no lo encontramos, eso significa que el elemento no estaba activo. Y si encontramos el botón de radio que coincide con ese selector, podemos estar seguros de que el botón de radio está marcado.
Para saber si encontramos dicho elemento o no, utilizamos el método .length para ver cuántos elementos se devuelven.
Si se encuentra el elemento, la función de longitud devolverá 1 (o el número de elementos coincidentes) y 0 en caso contrario.
Esto significa que podemos usarlo directamente en una condición if, ya que 0 se tratará como falso y todo lo que esté por encima de 0 como un valor verdadero.
Aquí hay un ejemplo:
if( $('#radio:checked').length) ) {
alert('Radio Button Is checked!');
}
Aquí hay un codepen con el que puedes jugar:
4. Comprobar si un botón de radio está marcado con Vanilla JavaScript
jQuery es solo una capa sobre JavaScript, lo que significa que todo lo que jQuery puede hacer también se puede hacer en JavaScript puro de una forma u otra.
Si está utilizando jQuery y desea tener acceso al objeto JavaScript para el elemento DOM seleccionado, todo lo que tiene que hacer es seleccionar el primer elemento en el objeto jQuery. Podemos hacerlo usando [0] o .get(0).
Luego, solo accedemos a la propiedad marcada directamente y devolverá un valor booleano que luego podemos usar como antes.
Sin embargo, si realmente quiere deshacerse de jQuery, puede seleccionar el elemento directamente usando JavaScript usando documet.querySelector si es un solo elemento.
Aquí están todas las combinaciones, siendo la última la única que es puro JavaScript.
if( $('#radio')[0].checked ){
alert("Radio Button is checked!");
}
if( $('#radio').get(0).checked ){
alert("Radio Button is checked!");
}
if( document.querySelector('#radio').checked ){
alert("Radio Button is checked!");
}
No use attr para verificar el estado del botón de opción
El elemento de radio HTML, que es básicamente una entrada con type=”radio”, puede contener un atributo en línea para determinar si el botón de radio aparecerá marcado al cargar la página o no.
<input type="radio" name="test" id="radio" checked>
<input type="radio" name="test" id="radio2">
jQuery proporciona otra función llamada attr que nos permite obtener el atributo de un elemento dado.
Algunos desarrolladores hacen uso de este método para obtener el valor sin darse cuenta de que de esta manera solo obtenemos el valor inicial del botón de opción.
Cualquier cambio en su estado no se reflejará en este atributo HTML y, por lo tanto, usar attr para obtener su estado devolverá valores incorrectos si el elemento cambia su estado dinámicamente a través de la interacción del usuario o mediante programación.
Así que hacer lo siguiente es un gran error que quieres evitar a toda costa:
if( $('#radio').attr('checked') ){
console.log("Is checked!");
}
Conclusión sobre el estado de los botones de opción
Elija la forma que le resulte más adecuada para verificar si un botón de radio está marcado. Solo asegúrese de no usar la opción attr, ya que eso probablemente conducirá a escenarios no deseados. (Y si lo usas, al menos asegúrate de saber por qué y las posibles consecuencias)
Ahora ha aprendido los métodos básicos para verificar el estado de los elementos DOM. Puede aplicar el mismo conocimiento para deshabilitar los botones en jQuery, verificar el estado de las casillas de verificación, deshabilitar los textos de entrada, las áreas de texto, etc.
Si está aprendiendo JavaScript, ¡vea cuál es la mejor manera de aprender JavaScript!
Artículos relacionados
