Cómo tomar la entrada con botones de radio en JavaScript
Por ejemplo, su aplicación web acepta correo electrónico o número de teléfono y desea que el usuario seleccione uno y no ambos. Los botones de radio son útiles para lograr esta tarea. Primero, definiremos los botones de radio en HTML y luego iremos hacia JavaScript para que podamos tomar la entrada con los botones de radio.
Html
Elija su opción preferida
En el código HTML anterior, utilizamos dos botones de radio y dimos el nombre del contacto. Es necesario dar el mismo nombre al mismo grupo de botones de radio para que solo uno se pueda seleccionar al mismo tiempo. También usamos etiquetas para etiquetar nuestros botones de radio de entrada. Veremos la siguiente salida en nuestro navegador cuando ejecutemos el código anterior:
También podemos ver que solo se puede seleccionar un botón de radio en un momento dado. Antes de ir hacia la parte de JavaScript, iniciemos un envío en HTML también para que podamos escuchar los eventos en este botón.
Elija su opción preferida
Iniciamos un botón y le dimos un evento en el cierre para que cuando el usuario haga clic en el entregar botón, la función handleclick () comenzará a ejecutar. Al final, hizo referencia a nuestro nombre de archivo JavaScript con la ayuda de guion etiqueta y usando el SRC El atributo pasó el nombre del archivo que es código.js.
Javascript
Ahora que hemos definido dos botones de radio en HTML, tomemos el siguiente paso para obtener la entrada del botón de radio, por lo tanto, es necesario determinar primero qué botón de radio está activo o seleccionado. Para este propósito, utilizaremos QuerySelectorAll () que seleccionará todos los botones de radio con el contacto con el nombre.
functionHandLecLick ()ConstradioButtons = documento.QuerySelectorAll ('input [name = "contacto"]');
Valor de LetSelected;
para (constructBofradioButtons)
if (rb.marcado)
selectValue = rb.valor;
romper;
if (selectedValue)
alerta (selectedValue);
demás
alerta ("Seleccione una opción");
En el JavaScript anterior, la función HandLecLick () se crea al inicio que se llama desde el HTML entregar botón. Después de esto, usando el QuerySelectorAll ("input [name =" contacto "]") Seleccionamos todos los botones de radio que tienen el nombre del contacto y guarde la referencia de todos los botones de radio en la variable botones de radio. Después de lo cual, creamos un bucle que iterará a través de cada botón de radio y verificará si cualquier botón de radio está marcado o no, lo que significa que el botón de radio está seleccionado o no. Si se selecciona un botón de radio, almacenará el valor de ese botón de radio en el Valor seleccionado variable.
Una vez que termina el bucle, unificamos la instrucción if/else que verifica si la variable selectedValue está vacía o no. Si tiene algún valor, entonces alertará ese valor, de lo contrario una alerta sobre Por favor seleccione una opción se mostrará al usuario.
Podemos ver en la salida anterior que cuando no seleccionamos un botón de radio, la alerta nos mostró el mensaje de que Por favor seleccione una opción. Sin embargo, cuando seleccionamos el Correo electrónico Botón de radio, vemos el valor del correo electrónico y cuando seleccionamos el Teléfono Botón de radio, entonces vemos el valor del teléfono.
Conclusión
Para configurar un grupo de opciones relacionadas y seleccionar solo una en un momento dado, se utilizan botones de radio. Los botones de radio se inician con <entrada> elementos de html y el comprobado La propiedad se usa en JavaScript para ver si se ha seleccionado o no un botón de radio. Los botones de radio son muy útiles cuando hay múltiples opciones disponibles y el desarrollador quiere que el usuario seleccione solo una. En esta publicación, aprendemos cómo tomar la entrada con los botones de radio en JavaScript.