显示/隐藏单选按钮上的按钮单击jquery

时间:2016-09-24 08:42:38

标签: javascript jquery html

我有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>

4 个答案:

答案 0 :(得分:3)

您需要在代码中使用不同的逻辑,请尝试以下操作:

AsyncTask

答案 1 :(得分:0)

好的,整理一下并让它起作用:

<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选择器中有一个拼写错误。

答案 2 :(得分:0)

请确保在拨打电话时正确写入ID&#39;点击&#39; document.ready()上的方法。您可以使用下面的代码 -

public class recursion {
     int k;                 
    public void recursion(int n){

      if(k==0){
        k=n;
       }
    if (n<0) {
        return;
    }
    else {

        System.out.print(number_pound(n)+stars(k-n));
        System.out.println();

        recursion(n-1);


    }
}

private String number_pound(int level) {
    String s = "";
    for(int i=0;i<level;i++)
        s+="#";
    return s;
}

private String stars(int level) {
    String s = "";
    for (int i = 0; i < level; i++)
        s+= "*";
    return s;
}

public static void main(String[] args) {
    recursion rec = new recursion();

    rec.recursion(3);
}

答案 3 :(得分:0)

我希望你想要这样的东西

      <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中添加它