1

Tengo el siguiente código con html, y está hecho para seleccionar solo un radio button

<div class="form-check" style="display:none;" id="contentRadioButton0">
  <input class="form-check-input" type="radio" name="optionResult" id="option0" value="Dato 0">
  <label class="form-check-label" for="option0">question</label>
</div>
<div class="form-check" style="display:none;" id="contentRadioButton1">
  <input class="form-check-input" type="radio" name="optionResult" id="option1" value="Dato 1">
  <label class="form-check-label" for="option1">question</label>
</div>
<div class="form-check" style="display:none;" id="contentRadioButton2">
  <input class="form-check-input" type="radio" name="optionResult" id="option2" value="Dato 2">
  <label class="form-check-label" for="option2">question</label>
</div>

<button onclick="ResultTest()" class="btn btn-primary">Enviar</button>

El último método que intenté fue el siguiente pero me regresa un undefined:

function ResultTest(){
  let activoFijo = getElementsByName("optionResult").value;
}

Mi pregunta es ¿cómo puedo saber qué radio button fue seleccionado y traer el value con javascript?

1 respuesta 1

2

Pon esto mejor:

function ResultTest(){
  let activoFijo = document.querySelector('input[name="optionResult"]:checked').value;
  console.log(activoFijo);
}

Explicación:

La función querySelector dice lo siguiente en su documentación:

Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.

En este caso concreto, el primer elemento a encontrar es un <input> que tiene de atributo de nombre (name=) optionResult y como selector CSS la pseudoclase denominada checked, que indica que está marcado. Al ser un conjunto de botones de radio con el mismo nombre solo uno puede estar marcado.

Por lo tanto el grupo especificado de selectores en este caso es:

input[name="optionResult"]:checked

La consulta con querySelector nos va a devolver un único elemento coincidente (el primero), por lo cual ya podemos intentar sacarle más información a continuación de la consulta, y como queremos saber el contenido de su atributo de valor (value=), le pasamos .value a dicho elemento.

Todo eso agrupado queda así:

document.querySelector('input[name="optionResult"]:checked').value;

que ya podemos asignar a lo que necesitemos después para trabajar con el.

2
  • Gracias, funciono!!!
    – Hugo
    Commented el 29 dic. 2021 a las 4:10
  • Perfecto, luego lo documento un poco mas :-)
    – masterguru
    Commented el 29 dic. 2021 a las 4:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.