选中/取消选中单选按钮，取消选中则隐藏选项

debugcn 发表于 Dev

加尔格

我有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代码的工作演示

古拉迪奥

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