0

Cada vez que intento saber cual radio button está seleccionado, me devuelve ambos en 'on' por consola. Parece algo obvio, pero me estoy desesperando. Agradezco la ayuda. Tengo el siguiente código en el formulario

<label for="check">Elija</label>
    <p>si <input type="radio" name="check" id="check1"> no <input type="radio" name="check" id="check2"></p>
    <br><br>
    <input type="submit" value="enviar">

y el siguiente javascript

form.addEventListener('submit', function(){
    var check = document.querySelector('#check1');
    var check2 = document.querySelector('#check2');

    console.log(check.nodeValue + ' ' + check2.nodeValue);
}

2 respuestas 2

0

Solo debes reemplazar "nodeValue" por la propiedad "chequed" para saber su estado. Es decir, si esta seleccionado "true" sino "false". Yo le agregué e.preventDefault(); para evitar el envío del form solo para ejemplificar fácilmente en este caso. No se si sera necesario para a tu uso. Saludos!

let form = document.getElementsByTagName("form")[0];

form.addEventListener('submit', e => {
      e.preventDefault();
      let check = document.querySelector('#check1');
      let check2 = document.querySelector('#check2');
      // Utilizo la propiedad "chequed" para saber si esta seleccionado.
      console.log(check.checked + ' ' + check2.checked);
});
<form>
<label for="check">Elija</label>
<p>
si <input type="radio" name="check" id="check1"> 
no <input type="radio" name="check" id="check2">
</p>
<br><br>
<input type="submit" value="enviar">
</form>

0

Creo que estás planeando mal el problema de fondo.

Primero: En un formulario, un grupo de radio buttons comparte el mismo nombre. Como máximo, uno de ellos puede estar activo a la vez (el formulario puede partir sin ninguno seleccionado). Al enviar el formulario, sólo el elemento activo va en la petición al backend.

Si por alguna razón dos elementos estuviesen activos a la vez (e.g., si les pones "checked" por consola), el último activo pisa a los anteriores. El backend sólo recibe un valor por cada elemento con el mismo name.

Segundo El valor de cada checkbox no es binario. Es un valor arbitrario que le quieres pasar al backend. Acá no hay tal cosa como "ver qué checkbox está activo, y si es el primero dijo rojo, si es el segundo dijo azul, etc etc". El checkbox contiene su valor. Si quieres le pones un label para reforzar la idea.

Tercero Dado que todos comparten el mismo nombre, no necesitas ponerle id. Selecciónalos por nombre y filtra por el que esté activo. A menos que sea con un propósito muy específico, un formulario ya hace todo lo que necesitas.

Resumiendo: puedes hacer lo que necesitas preguntando cuál de todos los radiobutton con el mismo nombre está checked

formulario.querySelector('input[name="color"]:checked');

(Si ninguno está seleccionado lo anterior es null, por lo cual no debieras preguntar su value sin comprobar que haya uno definido).

document.querySelector('#comprobar').addEventListener('click',e => {
   let formulario = e.target.parentNode;
   let  chequeado = formulario.querySelector('input[name="color"]:checked');
   if(!chequeado) {
    return console.log(`No hay color seleccionado`);
   }
   return console.log(`el elemento chequeado tiene valor ${chequeado.value}`); 
});
label {
clear:both;
display:block;
margin-bottom:5px;
}
<form>
<p>Seleccione un color:</p>
<label><input type="radio" name="color" value="blanco">Blanco</label>
<label><input type="radio" name="color" value="negro">Negro</label>

<input type="button" value="comprobar" id="comprobar">
</form>

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.