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

Check/uncheck radio buttons and hide option when uncheck

本文关键字：取消 隐藏 选项 选中 单选按钮      更新时间：2023-09-26

我有两个单选按钮，当我点击其中一个时，我会得到下拉菜单，其中必须选择金额。

到目前为止，我可以让它选中/取消选中它们，但问题是，当我取消选中单选按钮下拉列表时，它不会再次隐藏。

我不是很擅长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>

  1. 单选按钮的名称应相同以仅选择1
  2. ID应该是唯一的
  3. 获取所选单选按钮并使用其ID显示其计数器选择，因为它们相似

使用以下代码检查单选按钮是否已检查

if($("input:radio[name=paypal]:checked").val())
    alert("checked");
else
    alert("Not checked");

在if-else条件下进行隐藏和显示的过程。

您只需要检查RadioButton的值是否为checked。如果未选中，则在Javascript中再次设置相应下拉列表的样式属性display:none。

就像您对RadioButton的checked-状态所做的那样，只需更改条件和操作，就像您希望RadioButtons的行为一样。

相关文章：