Установите/снимите флажки переключателей и скройте опцию, если снимите галочку.

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. Получить кнопку выбранного радио и показать его счетчик выбрать, используя его идентификатор, так как они аналогичны

Answer 2

Используйте следующий код для проверки проверяется, является ли кнопка радио или нет

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

Выполняет ли ваш процесс скрытие и отображение внутри if else условия.

Answer 3

Вам нужно всего лишь проверить на наличие значения RadioButton, а не checked. Если флажок снят, установите атрибут стиля display:none для соответствующего выпадающего списка в Javascript.

Так же, как вы делаете это для checked -Статус RadioButton и просто измените состояние и действия, которые вы хотите, чтобы вести себя как RadioButtons.