选中/取消选中单选按钮并隐藏选项

Question

我有2个单选按钮，当我点击其中一个按钮时，我会在下拉菜单中选择数量。

到目前为止，我能够使其检查/取消他们，但问题是，当我取消选中单选按钮下拉不会再次隐藏。

我不是很好的JavaScript，所以请帮助这个。下面是代码

<div class="radio"> 
     <label><input type="radio" autocomplete="off" id="paypal" name="paypal"></label> PayPal 
    </div> 
    <div class="radio"> 
     <label><input type="radio" autocomplete="off" name="bank" id="bank"></label> Bank 
    </div> 

    <div class="form-group"> 
<span id="paypalamount" style="display:none">   
     <label class="col-sm-3 control-label" for="price"></label> 

     <div class="col-sm-9"> 
      <div class="input-group"> 
       <span class="input-group-addon">$</span> 
       <select id="paypalamount" required="required" class="form-control"> 
        <option selected value="50">50</option> 
       </select> 
      </div> 
     </div> 
</span>   
<span id="bankamount" style="display:none">  
     <label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>  
     <div class="col-sm-9"> 
      <div class="input-group"> 
       <span class="input-group-addon">$</span> 
       <select id="bankamount" required="required" class="form-control"> 
        <option selected value="50">50</option> 
        <option value="100">100</option> 
       </select> 
      </div> 
     </div>    
    </div>    
    </span> 

这里的部分JS

$(document).ready(function(){ 
    $("#paypal").change(function(){  
     var showOrHide =$(this).is(':checked');   
      $("#paypalamount").toggle(showOrHide); 
      $('[name="description"]').toggleClass('#paypalamount',showOrHide) 

    }); 
    $("#bank").change(function(){  
     var showOrHide =$(this).is(':checked');   
      $("#bankamount").toggle(showOrHide); 
      $('[name="description"]').toggleClass('#bankamount',showOrHide) 

    }); 
    $("input[type='radio']").click(function() 
    { 
     var previousValue = $(this).attr('previousValue'); 
     var name = $(this).attr('name'); 

     if (previousValue == 'checked') 
     { 
     $(this).removeAttr('checked'); 
     $(this).attr('previousValue', false); 
     } 
     else 
     { 
     $("input[name="+name+"]:radio").attr('previousValue', false); 
     $(this).attr('previousValue', 'checked'); 
     } 
    });      
}); 

而且这是工作上面JSFIDDLE

Answer 1

$(document).ready(function() { 
 
    $(":radio[name=bankpaypal]").change(function() { 
 
    if ($(this).is(':checked')) { 
 
     var name = $(this).attr('id') 
 
     $('span').hide() 
 
     $('span#' + name + 'amount').show() 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="radio"> 
 
    <label> 
 
    <input type="radio" autocomplete="off" id="paypal" name="bankpaypal"> 
 
    </label>PayPal 
 
</div> 
 
<div class="radio"> 
 
    <label> 
 
    <input type="radio" autocomplete="off" name="bankpaypal" id="bank"> 
 
    </label>Bank 
 
</div> 
 

 
<div class="form-group"> 
 
    <span id="paypalamount" style="display:none">   
 
      <label class="col-sm-3 control-label" for="price"></label> 
 

 
      <div class="col-sm-9"> 
 
       <div class="input-group"> 
 
        <span class="input-group-addon">$</span> 
 
    <select id="paypalamount1" required="required" class="form-control"> 
 
    <option selected value="50">50</option> 
 
    </select> 
 
</div> 
 
</div> 
 
</span> 
 
<span id="bankamount" style="display:none">  
 
      <label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>  
 
      <div class="col-sm-9"> 
 
       <div class="input-group"> 
 
        <span class="input-group-addon">$</span> 
 
<select id="bankamount1" required="required" class="form-control"> 
 
    <option selected value="50">50</option> 
 
    <option value="100">100</option> 
 
</select> 
 
</div> 
 
</div>

1. 单选按钮的名称应该是同一只选择1个
2. ID应该是唯一的
3. 获取选中的单选按钮，显示其计数器选择使用它的ID，因为他们是相似的

Answer 2

使用下面的代码的代码演示，检查单选按钮是否被选中与否

if($("input:radio[name=paypal]:checked").val()) 
    alert("checked"); 
else 
    alert("Not checked"); 

做你的隐藏和显示内部的过程如果其他条件。

Answer 3

您只需检查RadioButton的值是不是checked。如果未选中，请在Javascript中再次为相应的下拉菜单设置样式属性display:none。

就像你这样做的checked - RadioButton的状态，只是改变条件和你想要RadioButtons行为的动作。