라디오 버튼을 선택/선택 취소 하시겠습니까? 선택을 취소 할 경우

Question

라디오 버튼이 2 개 있습니다. 그 중 하나를 클릭하면 금액을 선택해야하는 드롭 다운 메뉴가 나타납니다.

지금까지 내가 확인/선택 취소 할 수 있었지만 문제는 라디오 버튼 드롭 다운을 다시 선택하면 다시 숨기지 않습니다.

저는 자바 스크립트에별로 좋지 않으므로이 문제에 대해 도움을주십시오. 여기에 코드 여기

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

의 부분은

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

JS

입니다 그리고 이것은 라디오 버튼이 선택되었는지 여부를 확인하는 코드 다음 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. 이름
2. 선택한 라디오 버튼을 취득하고 카운터 이후의 ID를 사용하여 표시를 선택 고유해야합니다에만 1 개
3. ID를 선택하기 위해 동일해야합니다 그들은 비슷합니다

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이 동작하기를 원합니다. 라디오 버튼의