Cómo verificar si se selecciona un botón de radio con JavaScript
Los botones de radio, una parte esencial de los formularios HTML, permiten a los usuarios seleccionar una de las múltiples opciones. Se pueden crear simplemente usando el Etiqueta de tipo "radio". Los botones de radio se usan en un grupo de dos o más botones con un nombre común. Esto hace que sea más fácil buscarlos en un solo objeto y verificar su estado. El estado de un botón de radio se puede verificar utilizando dos métodos diferentes que se discutirán en este artículo.
El primer paso de ambos métodos es el mismo que es crear un formulario que contenga botones de radio:
Configurar un formulario HTML
Simplemente crearemos un formulario HTML simple con algunos botones de radio:
Elige tu color favorito
En el código anterior, primero usamos un simple
Etiqueta para dar un encabezado para que el usuario pueda comprender fácilmente el propósito de nuestro formulario que es elegir un color favorito. Luego usamos el etiqueta para crear un formulario, dentro del cual hemos usado Etiquetas para crear tres botones de radio que brindan diferentes opciones a los usuarios.
También hemos usado el Etiquetas para etiquetar nuestros botones de radio. Luego usamos un par de
Etiquetas para darnos algunos descansos de línea para que toda la forma se vea bien y espaciada uniformemente. La forma terminó con un Etiqueta que se puede usar para enviar nuestro formulario. El Llama al CheckValue () función cuando se hace clic.
Ahora escribiremos el código JavaScript para definir el CheckValue () función para verificar qué botón de radio ha sido seleccionado:
Método 1: Uso de GetElementsByName ()
Podemos usar el .comprobado() propiedad para verificar si se ha seleccionado un botón de radio o no:
función checkValue ()
var radios = documento.getElementsByName ("color");
para (const radio de radios)
if (radio.marcado)
alerta (radio.valor + "es tu color favorito");
romper;
Dentro de CheckValue () función que hemos declarado por primera vez una variable nombrada radios que recibe un nodo de todos los botones de radio con el nombre de color. Luego iteramos sobre el nodo y verifique el estado de cada botón de radio. Si se ha seleccionado un botón de radio, usamos el alerta() método para mostrar qué color se ha seleccionado.
El código para toda la página web:
Elige tu color favorito
Si queremos verificar un botón de radio individual, podemos darle una identificación única y luego usar el getElementsById () método para almacenarlo en una variable. Entonces podemos usar el comprobado() propiedad para verificar si el botón ha sido elegido.
Método 2: Uso del método QuerySelectorAll ()
El QuerySelectorAll () El método toma un selector de CSS como argumento y devuelve un NODELIST de todos los elementos que coinciden con el selector dado:
función checkValue ()
var radios = documento.QuerySelectorAll ('input [name = "color"]');
para (const radio de radios)
if (radio.marcado)
alerta (radio.valor + "es tu color favorito");
romper;
La definición de la CheckValue () la función es casi la misma en ambos métodos. La diferencia es del método que obtiene la nota de los botones de radio. El método 2 usa el QuerySelectorAll () Método para obtener el nodelista.
Elige tu color favorito
Conclusión
Los botones de radio se utilizan para obtener la preferencia del usuario de una lista de opciones. Se pueden formar grupos de botones de radio dando el mismo valor a sus atributos de nombre. Solo se puede seleccionar un botón de radio a la vez. Esta publicación se trataba de cómo podemos usar JavaScript para verificar si se selecciona un botón de radio.