Cómo obtener el valor del botón de radio seleccionado usando JavaScript?

Los botones de radio son uno de los elementos más cruciales de HTML cuando intentan construir un formulario. Los botones de radio ofrecen al usuario algunas opciones desde las que solo puede elegir una sola opción.

Normalmente, cuando queremos obtener el valor de un elemento de una página web HTML, simplemente usamos la propiedad de valor de ese elemento en JavaScript. Pero no podemos hacer eso con los botones de radio. La razón es que no es una buena práctica obtener los valores de los botones de radio individuales. Por lo tanto, solo queremos un valor y eso es del botón de radio seleccionado

El proceso de obtener el valor de un botón de radio seleccionado incluye los siguientes pasos:

• Primero: Obtenga una referencia al grupo de botones de radio en JavaScript
• Segundo: de la lista de botones de radio, filtre el que con el "comprobado" propiedad
• Tercero: obtenga el atributo de valor del botón de radio filtrado

Creemos un ejemplo para mostrar estos pasos.

Paso 1: Configurar una página web HTML

Cree una página web HTML con las siguientes líneas dentro:

Qué te gustaría aprender?

Guitarra

Violín

Cajón

Aprender

Las siguientes cosas están sucediendo en el código mencionado anteriormente:

• Estamos creando un contenedor en el que pondremos nuestros botones de radio y el botón "Learn"
• Luego le preguntamos al usuario sobre el instrumento que quiere aprender
• Las opciones se dan en forma de botones de radio
• Cada botón de radio tiene su propio único identificación y valor Pero lo mismo nombre Para agruparlos
• Entonces un Se agrega la etiqueta para cada botón de radio
• Se ha agregado un botón en la página web para enviar la elección del usuario.

Enciende la página web HTML, y obtendrá esta salida en su navegador.

Tenemos botones de radio y nuestro botón de aprendizaje en el medio de la página web.

Paso 2: Escriba el código JavaScript para mostrar la elección del usuario

Queremos ejecutar una función en el archivo de script al hacer clic en el "Aprender" botón. Por lo tanto, agregamos las siguientes líneas:

documento.getElementById ("aprender").onClick = function ()
// El siguiente código entraría dentro de ella
;

Dentro de esta función, obtenga la referencia DOM de nuestro grupo de botones de radio utilizando la siguiente línea

var radiobuttongroup = documento.getElementsByName ("instrumento");

Después de eso, filtre este grupo de botones de radio para encontrar el que se verifica y guárdelo dentro de otra variable utilizando la siguiente línea

var checkedradio = array.De (RadioButTongroup).find ((radio) => radio.comprobado);

Por último, solicite al usuario sobre el instrumento que ella quiere aprender usando la función de alerta

alerta ("Has seleccionado:" + checkedradio.valor);

El archivo de script completo se ve así

documento.getElementById ("aprender").onClick = function ()
var radiobuttongroup = documento.getElementsByName ("instrumento");
var checkedradio = array.De (RadioButTongroup).encontrar(
(radio) => radio.comprobado
);
alerta ("Has seleccionado:" + checkedradio.valor);
;

Paso 3: Probar el script

Actualice la página web, seleccione un botón de radio y luego haga clic en el botón que dice "Aprender". Debe obtener la siguiente salida:

Ha obtenido con éxito el valor de un botón de radio marcado y alertado al usuario sobre su elección.

Envolver

Para obtener el valor de un botón de radio seleccionado en JavaScript, tenemos que seguir un conjunto de pasos. El primer paso es obtener una referencia de JavaScript a los botones de radio con el mismo nombre. Después de eso, queremos filtrar el botón de radio que tiene la propiedad marcada marcada. Después de eso, use el botón de radio de la tienda para obtener el valor utilizando el atributo de valor del elemento HTML. Entonces puedes trabajar con el valor recuperado.