показать кнопки/скрыть на радио кнопку мыши JQuery

Question

У меня есть 2 кнопки и 2 радиокнопки

Кнопки

1) btnErp

2) btngoogle

Radiobuttons

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> 

Answer 1

Вы должны использовать другую логику в коде, попробуйте следующее:.

$(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(); 
     } 
    }); 
}); 

Answer 2

Хорошо, убирала его немного и сделал его работу:

<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.

Answer 3

Пожалуйста, убедитесь, что у вас есть запись идентификаторов правильно во время вызова «нажмите» метод на document.ready() Вы можете использовать ниже код -

$(document).ready(function() { 

      $("#btnerp").hide(); 
      $("#btngoogle").hide(); 
      $("#rdiogoogle").click(function() { 
       $("#btngoogle").show(); 
       $("#btnerp").hide(); 
      }); 
      $("#rdioerp").click(function() { 
       $("#btngoogle").hide(); 
       $("#btnerp").show(); 
      }); 
     }); 

Answer 4

Я надеюсь, что вы хотите что-то вроде этого

 <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