Obtener el valor del botón de radio seleccionado en JavaScript

1. Obtenga el valor del elemento de radio usando document.querySelector() en JavaScript
2. Obtenga el valor del elemento de radio mediante getElementsByName() en JavaScript

Un botón de opción es un elemento de entrada HTML que especifica una amplia variedad de opciones entre las que el usuario puede elegir cualquier opción. En este artículo, aprenderemos cómo obtener el valor de este elemento HTML en JavaScript.

Obtenga el valor del elemento de radio usando document.querySelector() en JavaScript

Es una técnica básica de document proporcionada por JavaScript y devuelve la parte Objects/NodeList cuyo selector coincide con el selector deseado. La única diferencia entre querySelector() y querySelectorAll() es que primero se devuelve el objeto del elemento coincidente y luego todos los objetos del elemento coincidente. Si se pasa un selector no válido, se devuelve un SyntaxError.

Sintaxis:

document.querySelector($selector);

El selector es un parámetro obligatorio que especifica la condición de coincidencia o el identificador de la clase. Esta cadena debe ser una cadena de selección de CSS válida. Devuelve el primer objeto de elemento coincidente que satisface la condición de selector en el DOM.

Para obtener más información, lea la documentación del método querySelector.

Código de ejemplo:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female" checked="checked">Female

<button type="button" onclick="console.log(document.querySelector('input[name=gender]:checked').value)">
Click to check
</button>

En el código anterior, hemos definido dos elementos de entrada con los valores Male y Female. Cuando accedemos al documento con querySelector(), encuentra todos los nodos cuyo atributo de nombre coincida con el género y cuyo atributo marcado sea verdadero. Como se trata de un objeto, podemos extraer directamente el valor. Si necesita encontrar más de un elemento coincidente, puede usar querySelectorAll() e iterar a través del array e imprimir todos los valores. La salida del código anterior se verá así:

Producción :

Female

Obtenga el valor del elemento de radio mediante getElementsByName() en JavaScript

Esta es una técnica básica de document proporcionada por JavaScript y devuelve la parte Objects/NodeList cuyo atributo name coincide con el nombre deseado. Este NodeList representa un array de nodos accesible mediante un índice, y este índice empieza por 0 como cualquier otro array.

Sintaxis

document.getElementsByName(name);

name es un parámetro obligatorio que especifica el name de un atributo HTML que debe coincidir. Si se encuentran elementos coincidentes, devuelve el objeto del elemento DOM coincidente; de lo contrario, devuelve null.

La única diferencia entre getElementsByName y querySelectorAll es que getElementsByName primero selecciona solo aquellos elementos cuyo atributo de nombre especificado coincide con el nombre dado. En cambio, querySelectorAll puede utilizar cualquier selector, lo que le proporciona mucha más flexibilidad.

Para más información, lee la documentación del método getElementById.

Código de ejemplo:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female

const radios = document.getElementsByName('gender');

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    console.log(radios[i].value);
    break;
  }
}

En el código anterior, hemos definido dos elementos de entrada con los valores Masculino y Femenino. Cuando accedemos al documento con getElementsByName(), busca todos los nodos cuyo atributo de nombre coincida con el nombre y devuelve NodeList. Como se trata de un array, podemos extraer el primer elemento coincidente con [0]. Si se encuentra más de un elemento coincidente, puede examinar la matriz e imprimir todos los valores. La salida del código anterior se verá así:

Producción :

Male