1

Estoy tratando de revisar un radio button en javascript si esta checkeado, el problema surge que en el primer radio button lo toma pero al segundo radio no toma.

HTML:

<input type="radio" className="radiosbtn" name="sipa" id="sipa" value='false'/>Si
<input type="radio" className="radiosbtn" name="sipa" id="sipa" value='true'/>No

Javascript:

document
.getElementById("sipa")
.addEventListener("change", event => hasSipaHandlerChanged(event));


export const hasSipaHandlerChanged = event => {
  hasSipa = String(event.target.value);
console.log(event);
  if (hasSipa === "true") {
    const hasSipalDOM = document.querySelector(".has--sipa-gen");

    hasSipalDOM.insertAdjacentHTML(
      "beforeend",
      `
      <p> lorem, isum</p>
      `
    );
  } else {
    console.log(hasSipa);
  }
};

1 respuesta 1

1

Para lograr lo que buscas verificar si uno de los 2 radio esta seleccionado, considero que es mas simple proceder de este modo:

let radios = document.querySelectorAll(".radios")

radios.forEach((elemento) => {
 elemento.addEventListener("change", () => {
   let actividad = (elemento) ? `Cambio, elegiste: ${elemento.value}` : `No cambio`
   console.log(actividad)
 })
})

Donde:

  • Obtenemos a todos por medio de una clase asignada que en este caso llamaremos radios
  • Como querySelectorAll nos devuelve una lista de nodos de todos los elementos coincidentes entonces los recorremos con un forEach
  • Ahora por cada elemento que obtiene el bucle en sus iteraciones verificamos el event de change que ocurre cuando seleccionas un radio
  • Si dicho elemento que representa a uno de los radios esta en checked entonces su valor es true por eso solo lo escribí como: (elemento) entonces imprimimos el value que posee para no solo saber que fue elegido sino además recuperar que valor tiene asignado dicho radio button

EJEMPLO COMPLETO

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo 1</title>
    </head>
    <body>
    <input type="radio" class="radios" className="radiosbtn" name="sipa" id="sipa" value='false'/>Si
    <input type="radio" class="radios" className="radiosbtn" name="sipa" id="sipa" value='true'/>No
    <div id="aviso"></div>
    <script>
        let radios = document.querySelectorAll(".radios")
        
        radios.forEach((elemento) => {
         elemento.addEventListener("change", () => {
           let actividad = (elemento) ? `Cambio, elegiste: ${elemento.value}` : `No cambio`
           document.getElementById("aviso").innerHTML = `Elegiste: ${elemento.value}`
         })
        })
    </script>
    </body>
    </html>

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.