显示/隐藏单选按钮，基于其他单选按钮

Question

我有两组单选按钮。一个用于支付类型，一个用于金额。

如果付款类型是付费的，我想显示金额，如果是免费的，我不显示。我大部分时间都在使用它，但是如果用户从付费切换到免费，则保留金额按钮。

如何隐藏它们并将值设置为 null？

$(function() {
  $('#payment_type').change(function() {
    var optionClass = $(this).val();
    if (optionClass == "paid") {
      $('#amount').show();
    } else if (optionClass == "free") {
      $('#amount').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Session Type" class="col-lg-2 control-label">{{trans('Session Type')}}</label>
  <div class="col-lg-10">
    <label class="radio-inline">

                <input type="radio" name="payment_type" value="free"
                  @if($onlineCounsellingApplication->payment_type == 'free')
                    checked
                  @endif class="payment_type_radio">
                  Free
              </label>

    <label class="radio-inline">
                <input type="radio" name="payment_type" value="paid" id="payment_type"
                  @if($onlineCounsellingApplication->payment_type == 'paid')
                    checked
                  @endif class="payment_type_radio">
                  Paid
              </label>
  </div>
</div>

<div class="form-group">
  <label for="amount" class="col-lg-2 control-label">{{trans('Amount')}}</label>
  <div class="col-lg-10" id="amount" style="display:none">
    <label class="radio-inline">

                <input type="radio" name="amount" value="20"
                  @if($onlineCounsellingApplication->amount == '20')
                    checked
                  @endif class="amount_radio">
                  €20
              </label>

    <label class="radio-inline">
                <input type="radio" name="amount" value="30"
                  @if($onlineCounsellingApplication->amount == '30')
                    checked
                  @endif class="amount_radio">
                  €30
              </label>
  </div>
</div>

Answer 1

使用单选按钮的通用名称而不是 id 作为选择器将事件附加到两个单选按钮，然后使用 jQuery .toggle() 方法切换显示。

注意：我建议使用conditional (ternary) operator 而不是@if/@endif，例如：

<input type="radio" name="payment_type" {{$onlineCounsellingApplication->payment_type=='free'?'checked':''}} value="free" class="payment_type_radio">

$(function() {
  $('input:radio[name="payment_type"]').change(function() {
    $('#amount').toggle($(this).val() === "paid");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Session Type" class="col-lg-2 control-label">Session Type</label>
  <div class="col-lg-10">
    <label class="radio-inline">
        <input type="radio" name="payment_type" value="free" checked class="payment_type_radio">Free</label>

    <label class="radio-inline">
        <input type="radio" name="payment_type" value="paid" id="payment_type" class="payment_type_radio">Paid</label>
  </div>
</div>

<div class="form-group">
  <label for="amount" class="col-lg-2 control-label"></label>
  <div class="col-lg-10" id="amount" style="display:none">
    <label class="radio-inline">

                <input type="radio" name="amount" value="20" checked class="amount_radio">€20</label>

    <label class="radio-inline">
                <input type="radio" name="amount" value="30" class="amount_radio">€30</label>
  </div>
</div>

Answer 2

您需要收听payment_type 广播组，即':radio[name=payment_type]'，目前您只收听单个广播的change 事件。即#payment_type

$(function () {
    $(':radio[name=payment_type]').change(function () {
        //Rest of your code
    });
});

$(function() {


  $(':radio[name=payment_type]').change(function() {
    //Rest of your code
    $('#amount').toggle(this.value == 'paid')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Session Type" class="col-lg-2 control-label">Session Type</label>
  <div class="col-lg-10">
    <label class="radio-inline">
      <input type="radio" name="payment_type" value="free"/>
                  Free
    </label>

    <label class="radio-inline">
      <input type="radio" name="payment_type" value="paid" />
           Paid
      </label>
  </div>
</div>

<div class="form-group">
  <label id="amount" class="col-lg-2 control-label">Amount</label>
</div>