[英]show/hide buttons on radio button click jquery
我有2个按钮和2个radiobuttons
纽扣
1)btnErp
2)btngoogle
单选按钮
1)rdiogoogle
2)rdioErp
如果我点击rdiogoogle btngoogle应该是可见的btnerp应该隐藏,如果我点击rdioerp然后btnerp应该可见,btngoogle应该隐藏
我做了以下代码,但它无法正常工作
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>
您需要在代码中使用不同的逻辑,请尝试以下方法:
$(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();
}
});
});
好的,整理一下并使其工作:
<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>
基本上,你的jQuery选择器中有一个拼写错误。
在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();
});
});
我希望你想要这样的东西
<script>
$(function(){
$('#btngoogle').hide();
$('#btnerp').hide();
$('#rdiogoogle').on('click',function(){
$('#btngoogle').show();
$('#btnerp').hide();
});
$('#rdioerp').on('click',function(){
$('#btngoogle').hide();
$('#btnerp').show();
});
});
</script>
并删除
style="visibility:hidden;"
因为通过jQuery你可以保持隐藏你的按钮...所以不需要在css中添加它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.