[英]show/hide buttons on radio button click jquery
I have 2 buttons and 2 radiobuttons 我有2个按钮和2个radiobuttons
Buttons 纽扣
1) btnErp 1)btnErp
2) btngoogle 2)btngoogle
RadioButtons 单选按钮
1) rdiogoogle 1)rdiogoogle
2) rdioErp 2)rdioErp
If i click on rdiogoogle btngoogle should be visible and btnerp should be hide and if i click on rdioerp then btnerp should be visible and btngoogle should be hide 如果我点击rdiogoogle btngoogle应该是可见的btnerp应该隐藏,如果我点击rdioerp然后btnerp应该可见,btngoogle应该隐藏
I did the following code but it is not working 我做了以下代码,但它无法正常工作
Jquery jQuery的
<script>
$(document).ready(function () {
$("#btnerp").hide();
$("#rdiogoogle").click(function () {
$("#btngoogle").show();
$("#btnerp").hide();
});
$("#rdioerp").click(function () {
$("#btngoogle").hide();
$("#btnerp").show();
});
});
</script>
**HTML**
<div style="margin-top:20px;" class="spaceradio">
<span>
<input type="radio" id="rdiogoogle" name="logintype" value="Google Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">Google Login</span>
</span>
</div>
<div style="margin-top:20px;" class="spaceradio spacer">
<span>
<input type="radio" id="rdioerp" name="logintype" value="ERP Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">ERP Login</span>
</span>
</div>
<div class="imagediv" style="">
<input id="btngoogle" type="image" src="~/Images/google-logo-new.png" alt="Google Login" width="100" height="34" class="btnspacer" />
<input id="btnerp" type="button" class="btn btn-default btnspacererp" style="visibility:hidden;" width="200" height="34" value="Login" />
</div>
You need to use a different logic in your code, try this: 您需要在代码中使用不同的逻辑,请尝试以下方法:
$(document).ready(function () {
$("input[name=logintype]").change(function(){
if($("#rdiogoogle").is(':checked')){
$("#btgoogle").show();
$("#btnerp").hide();
}else if($("#rdioerp").is(':checked')){
$("#btngoogle").hide();
$("btnerp").show();
}
});
});
Okay, tidied it up a little and made it work: 好的,整理一下并使其工作:
<script>
$(document).ready(function() {
$("#btnerp").hide();
$("#rdiogoogle").click(function() {
$("#btngoogle").show();
$("#btnerp").hide();
});
$("#rdioerp").click(function() {
$("#btngoogle").hide();
$("#btnerp").show();
});
});
</script>
<div style="margin-top:20px;" class="spaceradio">
<span>
<input type="radio" id="rdiogoogle" name="logintype" value="Google Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">Google Login</span>
</span>
</div>
<div style="margin-top:20px;" class="spaceradio spacer">
<span>
<input type="radio" id="rdioerp" name="logintype" value="ERP Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">ERP Login</span>
</span>
</div>
<div class="imagediv" style="">
<input id="btngoogle" type="button" alt="Google Login" width="100" height="34" class="btnspacer" value="BtnGoogle" />
<input id="btnerp" type="button" class="btn btn-default btnspacererp" width="200" height="34" value="Login" />
</div>
Basically, you had a typo in your jQuery selector. 基本上,你的jQuery选择器中有一个拼写错误。
Please make sure you have write ids correctly while calling 'click' method on document.ready().You may use below code - 在document.ready()上调用'click'方法时,请确保您有正确的写入ID。您可以使用下面的代码 -
$(document).ready(function () {
$("#btnerp").hide();
$("#btngoogle").hide();
$("#rdiogoogle").click(function () {
$("#btngoogle").show();
$("#btnerp").hide();
});
$("#rdioerp").click(function () {
$("#btngoogle").hide();
$("#btnerp").show();
});
});
I hope you want something like this 我希望你想要这样的东西
<script>
$(function(){
$('#btngoogle').hide();
$('#btnerp').hide();
$('#rdiogoogle').on('click',function(){
$('#btngoogle').show();
$('#btnerp').hide();
});
$('#rdioerp').on('click',function(){
$('#btngoogle').hide();
$('#btnerp').show();
});
});
</script>
and also remove 并删除
style="visibility:hidden;"
because by jQuery you can keep hidden your button...so no need to add it in css 因为通过jQuery你可以保持隐藏你的按钮...所以不需要在css中添加它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.