Hide and show a div when clicking on a radiobutton with javascript

Navigation
2

I want to make two RadioButtons work with the same ID but I want to make that when you press deposito show the div1 and when you press ventanilla show the div2 . I can not get it, I hope you can help me do it with javascript or jquery. Thanks 

$(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>
    
asked by Eduardo Javier Maldonado 31.03.2016 в 20:17
source

2 answers

4

Try the following code 

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

The points that you modify

  • add a class to the radiobutton to be able to select it in jquery
  • use the var valor = $(this).val(); to take the value of the selected radius
answered by 31.03.2016 / 20:39
source
3

It is not necessary to use an ID or a class, you can apply the event to the 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>

Note that I'm not using this to refer to the object, I'm taking advantage of the event.target and the effects show() and hide() . I also remove the styles to make it look better.

    
answered by 31.03.2016 в 20:52
Execute action every day at the same time in C # Arrangement of procedures c