Diferentes formas de obtener valor del botón de radio en JavaScript

En JavaScript, generalmente nos encontramos con páginas web donde se requiere obtener el valor del botón de radio para verificar si los datos ingresados ​​son correctos o no. Por ejemplo, debe enviar un formulario y notificar al usuario si los datos ingresados ​​son relevantes. En tales casos, obtener valor del botón de radio en JavaScript es una característica muy útil para guardar el tiempo del usuario final y garantizar la seguridad de los datos.

Diferentes formas de obtener valor del botón de radio en JavaScript

Para obtener valor del botón de radio en JavaScript, se pueden utilizar los siguientes métodos:

• "getElementById ()" y "getElementsByName ()" métodos
• "encontrar()" método
• "comprobado" propiedad

Ahora pasaremos por cada una de las metodologías enumeradas una por una!

Método 1: Obtener valor del botón de radio en JavaScript usando getElementById () y getElementsByName () métodos

El "getElementById ()"El método obtiene un elemento con una ID especificada y el"getElementsByName ()"El método accede a los elementos con el nombre especificado en su argumento. Estos métodos se pueden usar para obtener la ID del botón de los atributos y el valor del nombre para acceder a ellos y mostrar sus valores.

Sintaxis

documento.getElementById (ElementId)

Aquí, "elemento"Se refiere a la ID especificada del elemento agregado.

documento.GetElementsByName (nombre)

En la sintaxis anterior, "nombre"Es el valor del nombre del elemento.

El siguiente ejemplo explicará el concepto establecido claramente.

Ejemplo

En el siguiente ejemplo, incluiremos un encabezado en el ""Etiqueta con un descanso de línea de la siguiente manera:

Seleccione cualquiera:

Ahora, asigne el tipo de entrada como "radio"El botón de radio, y especifique su ID, nombre y valor:

Además, incluya un "etiqueta"Para el tipo de entrada con un valor llamado"Correo electrónico":

Correo electrónico

Del mismo modo, repita los pasos discutidos para el "Telefono no." campo:

Telefono no.

Después de eso, incluya un botón llamado "Entregar"Para obtener el valor al hacer clic:

Entregar

Ahora, obtenga el botón creado usando el "documento.getElementById ()Método "en el archivo JavaScript. Además, aplique un "al hacer clic"Evento para acceder a una función. En la función definida a continuación, acceda a ambos tipos de entrada utilizando el "documento.getElementsByName ()"Método como el"nombre"El atributo en ambos tipos de entrada es el mismo.

Finalmente, aplique un "para"Loop y obtenga el valor del botón de radio seleccionado usando el"comprobado"Propiedad y mostrarlo en el cuadro de alerta:

documento.getElementById ('enviar').onClick = function ()
valor var = documento.getElementsByName ('contacto');
para (var radio de valor)
if (radio.marcado)
alerta (radio.valor);

La salida del programa anterior resultará de la siguiente manera:

Método 2: Obtener valor del botón de radio en JavaScript usando el método find ()

El "encontrar()El método "accede al valor del primer elemento. Este método se puede implementar para obtener el valor del botón de radio marcado al encontrar los atributos específicos con la ayuda del nombre agregado.

Sintaxis

Formación.De (valor).encontrar (radio => radio.comprobado)

Aquí, "de()"El método accederá al elemento especificado", "encontrar()El método "lo coincidirá con el valor del botón de radio marcado, y el valor resultante se devolverá.

Mira el siguiente ejemplo.

Ejemplo

Para HTML, utilizaremos el mismo código dado en el método anterior. En nuestro archivo JavaScript, obtendremos la ID del botón usando el "documento.getElementById ()"Método con un"al hacer clic"Evento acceder a la función, que primero obtendrá ambos tipos de entrada que tienen el mismo atributo de nombre"contacto" utilizando el "documento.getElementsByName ()" método.

Por último, aplique el "de()"Método para acceder al valor almacenado en la variable nombrada"valor", y el "encontrar()"El método obtendrá el estado marcado de la entrada. Finalmente, el "valor"La propiedad devolverá el valor del botón de radio específico marcado como se verifica:

documento.getElementById ('enviar').onClick = function ()
valor var = documento.getElementsByName ("contacto");
var selectValue = array.De (valor).encontrar (radio => radio.comprobado);
alerta (selectValue.valor);

Producción

Método 3: Obtener valor del botón de radio en JavaScript usando la propiedad checked ()

El "comprobadoLa propiedad devuelve el estado verificado del tipo de entrada especificado. Este método se puede aplicar para verificar la condición marcada para cada uno de los botones de radio y devolver el valor correspondiente.

Sintaxis

colección.comprobado

En la sintaxis dada, "colección"Se refiere al objeto especificado que se verifica.

Ejemplo

Primero, agregue un "etiqueta" usando ""Etiqueta para especificar una categoría en particular seguida de un descanso de línea en"
" etiqueta:

Seleccione cualquiera:

A continuación, repita los procedimientos discutidos anteriormente para especificar dos tipos de entrada como "radio"Y asigne los valores dados seguidos de una ruptura de línea que se muestra a continuación:

Masculino
Femenino

Además, incluya un tipo de entrada llamado "entregar"Para obtener el valor del botón de radio al hacer clic. Un "al hacer clicEl evento también se agregará para acceder a la función especificada al hacer clic en Enviar:

Después de eso, declare una función llamada "SubtData ()"Y obtenga los elementos de los ID especificados y guárdelos en las variables llamadas"conseguir" y "Get1". Finalmente, aplique una condición de que si el botón de radio se refiere al "Masculino" o "Femenino"Se accede a género, el"comprobado"La propiedad lo comprobará y el"valorLa propiedad obtendrá el valor correspondiente con cada uno de los botones de radio marcado:

functionsubmitData ()
Get = documento.getElementById ("género")
get1 = documento.GetElementById ("Genderfem")
Si (obtenga.marcado == true)
alerta (documento.getElementById ("género").valor);

elseif (get1.marcado == true)
alerta (documento.GetElementById ("Genderfem").valor);

Producción

Hemos compilado diferentes formas de obtener valor de un botón de radio en JavaScript.

Conclusión

Para obtener valor del botón de radio en JavaScript, aplique el "getElementById ()" y "getElementsByName ()"Métodos para acceder a ambos atributos al mismo tiempo y mostrar sus valores correspondientes, o"encontrar()"Método para que se verifiquen los botones de radio encontrando los atributos especificados basados ​​en sus nombres establecidos o el"comprobado"Método de propiedad para aplicar una condición para cada uno de los atributos y obtener su valor. Este blog está guiado relacionado con el procedimiento de obtener valor del botón de radio en JavaScript.