jQuery를 사용하여 요소를 숨기려면 어떻게해야합니까?

Question

HTML

<div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-default active"> 
       <input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery 
      </label> 
      <label class="btn btn-default" id="bkash-radio"> 
       <input type="radio" name="payment_options" value=2 autocomplete="off">bKash 
      </label> 
     </div> 

     <input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/> 

jQuery를 기능 :

$(document).on("click", "#bkash-radio", function() { 
    console.log('test'); 
    $("#trx_id").attr("type", "text"); 
}); 

$(document).on("blur", "#bkash-radio", function() { 
    console.log('test'); 
    $("#trx_id").attr("type", "hidden"); 
}); 

내가 두 번째 라디오 옵션을 선택하면 텍스트 상자 ID = trx_id을 보여주기 위해 노력하고 있지만, 선택이 해제 될 때 내가 원하는 텍스트 상자를 숨길 수 있습니다. 어떻게해야합니까?

Answer 1

1. this.value==="2"
2. prop유형을 조작보다 있는지 당신의 [name='payment_options'] 라디오
3. change 이벤트에 대상 각각

$(document).on("change", "[name='payment_options']", function() { 
 
    $("#trx_id").prop("type", this.value==="2" ? "text" : "hidden"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-default active"> 
 
    <input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery 
 
    </label> 
 
    <label class="btn btn-default" id="bkash-radio"> 
 
    <input type="radio" name="payment_options" value=2 autocomplete="off">bKash 
 
    </label> 
 
</div> 
 

 
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>