選中/取消選中單選按鈕並隱藏選項

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行爲的動作。