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

＆＃13;

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

＆＃13;

docker run ...

＆＃13;

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

Answer 2

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

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

执行隐藏和显示if else条件的过程。

Answer 3

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

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

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

3 个答案: