javascript - チェックボックスの条件が一度だけ機能する場合のjavascript

Question

私はJavaScriptプログラミングにかなり慣れていないので、ここで質問をした後でもこれを正しく理解できないようです。基本的に、選択されていない場合にのみ2つのラジオボタンを表示するチェックボックスがあります

<span><strong>Not Available</strong></span>
<input  type="checkbox" placeHolder="" id="available" style="" name="available" required value="Yes"/>
<span style=" visibility: hidden; " id="BACSSpan">BACS</span><input type="radio" id="BACS" name="paymentSpecified" value="BACS" style="visibility: hidden;">
<span style="visibility: hidden;" id="ChequeSpan">Cheque</span> <input type="radio" id="Cheque" name="paymentSpecified"  value="Cheque" style=visibility: hidden;">

次のJavaScriptを使用しました：

$('body').on('click', '#available', function ()
  {
    if ($('#available:checked'))
    {
      $('#BACSSpan').css('visibility','hidden');
      $('#BACS').css('visibility','hidden');
      $('#ChequeSpan').css('visibility','hidden');
      $('#Cheque').css('visibility','hidden');
    } else 
    {
      $('#BACSSpan').css('visibility','visible');
      $('#BACS').css('visibility','visible');
      $('#ChequeSpan').css('visibility','visible');
      $('#Cheque').css('visibility','visible');
    }
  }) 

すべきことは、2 つのラジオ ボタンを交互に表示することですが、何もしていません。その後、必要な機能が一度だけ発生します