javascript - 选中/取消选中单选按钮并在取消选中时隐藏选项

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. 获取选定的单选按钮并使用其 ID 显示其计数器选择，因为它们很相似