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"); 
}); 

私は、第2の無線オプションを選択するとテキストボックスの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"/>