2

Quiero lograr hacer funcionar dos RadioButtons con un mismo ID pero quiero lograr que cuando se presione deposito muestre el div1 y cuando se presione ventanilla muestre el div2. No logro conseguirlo, espero me puedan ayudar a hacerlo con javascript o jquery. Gracias

$(document).ready(function() {
  $("#pago1").click(function(evento) {
    if ("#pago1" == Deposito) {
      $("#div1").css("display", "block");
      $("#div2").css("display", "none");
    } else {
      $("#div1").css("display", "none");
      $("#div2").css("display", "block");
    }
  });
});
<p class="auto-style3">
  <input name="pago1" type="radio" style="width: 70px; height: 70px" value="Ventanilla" />&nbsp;<span class="auto-style4"> Recoger en Ventanilla</span>
</p>
<p>&nbsp;</p>
<p class="auto-style3">
  <input checked="checked" name="pago1" type="radio" style="width: 70px; height: 70px" value="Deposito" /><span class="auto-style4"> Deposito Bancario</span>
</p>
<p>&nbsp;</p>

<div id="div1" style="display:;">
  <p class="auto-style3"><span class="auto-style4">CLABE Bancaria:</span>
  </p>
  <p class="auto-style1">
    <input type="number" name="RECEIVER_BANK_ACCOUNT_NUMBER" id="RECEIVER_BANK_ACCOUNT_NUMBER" size="23" style="font-family: Arial; font-size: 50pt; height: 75px; width: 845px;" required class="auto-style5" />
  </p>
  <p class="auto-style3"><span class="auto-style4">Confirma CLABE Bancaria:</span>
  </p>
  <p class="auto-style1">
    <input type="number" name="RECEIVER_ACCOUNT_NUMBER_CONFIRMATION" id="RECEIVER_ACCOUNT_NUMBER_CONFIRMATION" size="23" style="font-family: Arial; font-size: 50pt; height: 75px; width: 845px;" required class="auto-style5" />
  </p>
</div>

<div id="div2" style="display:none;">
  <center>
    <span>Has seleccionado ventanilla</span>
  </center>
</div>

2 respuestas 2

5

Intenta con el siguiente codigo

$(document).ready(function(){
        $(".pago").click(function(evento){
          
            var valor = $(this).val();
          
            if(valor == 'Deposito'){
                $("#div1").css("display", "block");
                $("#div2").css("display", "none");
            }else{
                $("#div1").css("display", "none");
                $("#div2").css("display", "block");
            }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<p class="auto-style3"><input name="pago1" class="pago" type="radio" style="width: 70px; height: 70px" value="Ventanilla"/>&nbsp;<span class="auto-style4"> Recoger en Ventanilla</span></p>
            <p>&nbsp;</p>
        <p class="auto-style3"><input checked="checked" class="pago" name="pago1" type="radio" style="width: 70px; height: 70px" value="Deposito"/><span class="auto-style4"> Deposito Bancario</span></p>
            <p>&nbsp;</p>

<div id="div1" style="display:;">
        <p class="auto-style3"><span class="auto-style4">CLABE Bancaria:</span></p>
		    <p class="auto-style1"><input type="number" name="RECEIVER_BANK_ACCOUNT_NUMBER" id="RECEIVER_BANK_ACCOUNT_NUMBER" size="23" style="font-family: Arial; font-size: 50pt; height: 75px; width: 845px;" required class="auto-style5"/></p>
        <p class="auto-style3"><span class="auto-style4">Confirma CLABE Bancaria:</span></p>
  <p class="auto-style1"><input type="number" name="RECEIVER_ACCOUNT_NUMBER_CONFIRMATION" id="RECEIVER_ACCOUNT_NUMBER_CONFIRMATION" size="23" style="font-family: Arial; font-size: 50pt; height: 75px; width: 845px;" required class="auto-style5"/></p>
</div>
        
<div id="div2" style="display:none;">
<center>
  <span>Has seleccionado ventanilla</span>
</center>
</div>

Los puntos que modifique

  • agregue un class a los radiobutton para poder seleccionarlo en jquery
  • use el var valor = $(this).val(); para tomar el valor del radio seleccionado
1
  • Muchas gracias amigo era una parte que no comprendía del todo aparte yo estaba usando otro <script> , agradezco tu respuesta. Commented el 31 mar. 2016 a las 18:46
3

No es necesario usar un ID o una clase, puedes aplicar el evento a los radio buttons:

$(document).ready(function() {
    $("input[type=radio]").click(function(event){
        var valor = $(event.target).val();
        if(valor =="Deposito"){
            $("#div1").show();
            $("#div2").hide();
        } else if (valor == "Ventanilla") {
            $("#div1").hide();
            $("#div2").show();
        } else { 
            // Otra cosa
        }
    });
});
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<p class="auto-style3">
    <input name="pago1" type="radio" value="Ventanilla"/>
        &nbsp;
        <span class="auto-style4"> 
            Recoger en Ventanilla
        </span>
</p>
<p class="auto-style3">
    <input checked="checked" name="pago1" type="radio" value="Deposito"/>
    <span class="auto-style4"> 
        Deposito Bancario
    </span>
</p>
<div id="div1" style="display:;">
    <p class="auto-style3">
        <span class="auto-style4">
            CLAVE Bancaria:
        </span>
    </p>
    <p class="auto-style1">
        <input type="number" name="RECEIVER_BANK_ACCOUNT_NUMBER" id="RECEIVER_BANK_ACCOUNT_NUMBER" required class="auto-style5"/>
    </p>
    <p class="auto-style3">
        <span class="auto-style4">
            Confirma CLAVE Bancaria:
        </span>
    </p>
    <p class="auto-style1">
        <input type="number" name="RECEIVER_ACCOUNT_NUMBER_CONFIRMATION" id="RECEIVER_ACCOUNT_NUMBER_CONFIRMATION" required class="auto-style5"/> 
    </p>
</div>
        
<div id="div2" style="display:none;">
    <center>
      <span>Has seleccionado ventanilla</span>
    </center>
</div>

Observa que no estoy usando this para referirme al objeto, estoy aprovechando el event.target y los efectos show() y hide(). También le quite los estilos para que se muestre mejor.

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.