Скрывать и показывать div, кликнув в radiobutton с javascript

Мне хочет удасться заставить функционировать двух RadioButtons с той же идентификацией, но я хочу добиться, что, когда на него нажмут deposito покажите div1 и когда на него нажмут ventanilla покажите div2. Меня не удается достичь этого, я надеюсь, что они могут помогать мне делать это с javascript или jquery. Спасибо.

$(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
задан 31.03.2016, 21:47
2 ответа

Попробуй со следующим кодом

$(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>

точки, которые он изменяет

  • , добавьте, что один class в radiobutton, чтобы мочь выбирать в jquery
  • , использовал var valor = $(this).val();, чтобы брать стоимость отборного радио
5
ответ дан 24.11.2019, 14:40
  • 1
    Большое спасибо друг был частью, что не comprend и # 237; в совсем отдельно меня он использовал другой < script> я благодарен за твой ответ. – Eduardo Javier Maldonado 31.03.2016, 21:46

Не необходимо использовать идентификацию или класс, ты можешь применять событие к радио 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>

Наблюдает, что я не использую this, чтобы относиться к объекту, я используем event.target и эффекты show() и hide(). TambiГ©n я лишил его стилей для того, чтобы он был лучше.

3
ответ дан 24.11.2019, 14:40