0

Hola que tal? Estoy intentando hacer que según el valor de los siguientes radio buttons me tire distinto resultado, pero no logro hacerlo, mi código hasta ahora:

 <div class="contenedorOpciones">

    <form action="">

        <div id="climaPreferido" style="display: block;">
            <p>Clima preferido?</p>
            <input onclick="cambio()" class="inputsRadio climaRadio" value="frio" type="radio" name="clima" id="fresco"><span class="opcion">Frio </span> 
            <input onclick="cambio()" class="inputsRadio climaRadio" value="calor" type="radio" name="clima" id="caluroso"><span class="opcion">Calor </span> 
        </div>
      
        <div style="display: none;" id="zonaGeografica">
            <p>Preferencia:</p>
            <input class="inputsRadio geografiaRadio" type="radio" name="geografica1" required id=""><span class="opcion">Montaña </span> 
            <input class="inputsRadio geografiaRadio" type="radio" name="geografica2" id=""><span class="opcion">Mar </span> 
            <input class="inputsRadio geografiaRadio" type="radio" name="geografica3" id=""><span class="opcion">Rio </span> 
        </div>


        <input id="botonAceptar" type="submit" onclick="aceptar()">
    </form>

</div>

Cual seria el metodo correcto para llamar al checked de estos input? Desde ya muchas gracias. Estoy usando esta funcion pero solo me tira un resultado:

function aceptar(){

switch (clima.value) {


    case calor:
      alert("resultado A")
    break;
    case frio:
     alert("resultado B")
     break;

}

}
0

2 respuestas 2

2

Creo que lo que buscas es esto:

var inputs = document.getElementsByClassName('climaRadio');

for(var i=0; i<inputs.length;i++){
    inputs[i].addEventListener('click',function(){
      var valor = this.value;
      console.log(valor);
    });
}
<p>Clima preferido?</p>
<input class="inputsRadio climaRadio" value="frio" type="radio" name="clima" id="fresco"><span class="opcion">Frio </span> 
<input class="inputsRadio climaRadio" value="calor" type="radio" name="clima" id="caluroso"><span class="opcion">Calor </span> 

1
  • Corregí mi pregunta siendo mas especifico, gracias por tu respuesta
    – Fede B
    Commented el 14 mar. 2021 a las 22:49
0

Creo que solo debes capturar tus ids con javascript, jquery o lo que necesites.

const data = document.getElementById('radios');

data.addEventListener('click', () => {
  let form = new FormData(data);
  
  if(form.getAll('clima')[0] === 'frio'){
   alert('escogiste frio');
  }
  if(form.getAll('clima')[0] === 'calor'){
    alert('escogiste calor');
  }
});
<form id="radios">
  <label>Frio</label>
  <input type="radio" id="frio" name="clima" value="frio">
  <label>Calor</label>
  <input type="radio" id="calor" name="clima" value="calor">
</form>

2
  • Corregí mi pregunta siendo mas especifico, gracias por tu respuesta –
    – Fede B
    Commented el 14 mar. 2021 a las 22:49
  • También edité mi respuesta para que veas cómo podría funcionar usando un form de ese tipo que tienes
    – gaidyjg
    Commented el 14 mar. 2021 a las 23:20

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.