Un botón de opción es un icono que se utiliza en formularios para recibir información del usuario. Permite a los usuarios elegir un valor del grupo de botones de opción. Los botones de opción se utilizan básicamente para selección única de múltiples , que se utiliza principalmente en formularios GUI.
Puede marcar/marcar solo un botón de opción entre dos o más botones de opción. En este capítulo, lo guiaremos sobre cómo verificar un botón de opción usando el lenguaje de programación javascript .
Para ello, primero diseñamos un formulario que contiene radio botones usando HTML, y luego usaremos programación JavaScript para marcar el botón de opción. También comprobaremos qué valor del botón de opción está seleccionado.
Crear un botón de opción
A continuación se muestra un código simple para crear un grupo de botones de opción.
Copiar código
svm
Elige tu temporada favorita:
VeranoInvierno
Lluvioso
Otoño
Pruébalo ahora
Marque un botón de opción
No necesitamos escribir ningún código específico para marcar el botón de opción. Se pueden comprobar una vez creados o especificados en formato HTML.
Sin embargo, tenemos que escribir el código JavaScript para obtener el valor del botón de opción marcado, que veremos en el capítulo siguiente:
Compruebe que el botón de opción esté seleccionado o no
Hay dos formas en JavaScript de comprobar el botón de opción marcado o de identificar qué botón de opción está seleccionado. JavaScript ofrece dos métodos DOM para esto.
La propiedad de radio de entrada marcada se utiliza para comprobar si la casilla de verificación está seleccionada o no. Usar document.getElementById('id').comprobado método para esto. Devolverá el estado marcado del botón de opción como un valor booleano. Puede ser verdadero o falso.
Verdadero - Si se selecciona el botón de opción.
FALSO - Si el botón de opción no está seleccionado/marcado.
Consulte el código JavaScript a continuación para saber cómo funciona:
Ejemplo
Por ejemplo, tenemos un botón de opción llamado Verano e id = 'verano'. Ahora, verificaremos usando esta identificación de botón si el botón de opción está marcado o no.
Copiar código
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } selector de consulta()
La función querySelector() es un método DOM de JavaScript. Utiliza la propiedad de nombre común de los botones de opción que contiene. Este método se utiliza como se indica a continuación para verificar qué botón de opción está seleccionado.
document.querySelector('input[name='JTP']:checked')
Ejemplo
Por ejemplo, tenemos un grupo de botones de opción que tienen el nombre de propiedad nombre = 'temporada' para todos los botones. Ahora, entre estos botones llamados temporada comprobaremos cuál está seleccionado.
Copiar código
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Obtenga el valor del botón de opción marcado:
Usando getElementById ()
A continuación se muestra el código para obtener el valor del botón de opción marcado usando el método getElementById():
Copiar código
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Usando querySelector()
A continuación se muestra el código para obtener el valor del botón de opción marcado usando el método querySelector():
Copiar código
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Código completo para obtener el valor del botón de opción seleccionado
En este ejemplo, juntaremos todo el código anterior para crear y marcar un botón de opción. Después de eso, también recuperaremos el valor del botón de opción seleccionado.
operador ternario java
Copiar código
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Pruébalo ahora Producción
Cuando ejecute el código anterior, se ejecutará en la web y dará el resultado que se indica a continuación:
Elija uno de los botones de opción y haga clic en el Entregar y obtenga el valor seleccionado.
En caso de que no elijas ninguna de las temporadas y hagas clic directamente en el Entregar botón, le mostrará un mensaje de error que: No has seleccionado ninguna temporada porque hemos utilizado la validación.
Obtener el valor del botón de opción seleccionado: querySelector()
Método DOM querySelector()
La función querySelector() es un método DOM de JavaScript. Este método se utiliza para obtener el elemento que coincide con el especificado. Selector CSS en el documento. Recuerde que debe especificar la propiedad de nombre del botón de opción en el código HTML.
comando sed
Se utiliza como document.querySelector('entrada[nombre='JTP']:marcado') dentro de para verificar el valor del botón de opción seleccionado del grupo de botones de opción. Minimiza la longitud del código al obtener el valor del botón de opción seleccionado utilizando una pequeña línea de código.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Vea el código a continuación cómo se usará con el formulario HTML:
Copiar código
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Pruébalo ahora Producción
Cuando ejecute el código anterior, le mostrará el resultado en la web como se indica a continuación. Desde aquí, elige tu estación favorita.
Cuando elige un valor entre el botón de opción dado y hace clic en el Entregar botón, obtendrá el valor seleccionado en la web.
En caso de que haga clic en el Entregar sin elegir ninguno de los botones de opción, le mostrará un mensaje de error que: No has seleccionado ninguna temporada .
Entonces aquí puedes ver que ambos getElementById('temporada').valor y document.querySelector('entrada[nombre='JTP']:marcado') funciona igual. Ambos se utilizan para encontrar el valor del botón de opción marcado. Puedes utilizar cualquiera de ellos.
getElementById frente a querySelector
Ambos métodos DOM getElementByID() y querySelector() funcionan casi igual. Sin embargo, también tienen algunas diferencias como el rendimiento y el tamaño del código, etc. Veamos algunas diferencias entre ellos:
Longitud del código
El código escrito con getElementById es un poco más largo que querySelector. Usando el método getElementById, necesitamos verificar cada botón de opción individualmente cuál está marcado.
Por otro lado, si usas el método DOM querySelector, solo debes poner una sola línea de código para verificar el botón de radio marcado y obtener su valor. Entonces, la conclusión es que querySelector requiere menos código.
Actuación
Ambas funciones ofrecen un buen rendimiento, pero todo lo que necesitas es saber cuál es mejor. El obtenerElementoPorId El método es mucho más rápido que el selector de consulta método. El método querySelector también es un poco complejo.
Valor utilizado por los métodos DOM
El método getElementById siempre utiliza una identificación única de cada botón de opción mientras verifica el botón marcado y devuelve el primer elemento que coincide con la identificación.
Mientras que querySelector usa un común nombre (selector) para todos los botones de opción para obtener el botón de opción marcado y devuelve el primer elemento que coincide con el selector especificado.