I want to make two RadioButtons work with the same ID but I want to achieve that when it is pressed it deposito
shows the div1
and when it is pressed it ventanilla
shows the div2
. I can't get it, I hope you can help me to do it with javascript or jquery. Thank you
$(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" /> <span class="auto-style4"> Recoger en Ventanilla</span>
</p>
<p> </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> </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>
Try the following code
The points you change
class
to the radiobutton to be able to select it in jqueryvar valor = $(this).val();
to take the value of the selected radiusIt is not necessary to use an ID or a class, you can apply the event to the radio buttons:
Notice that I'm not using
this
to refer to the object, I'm taking advantage of theevent.target
and effectsshow()
andhide()
. I also removed the styles for it to display better.