Show/Hide radio buttons, based on other radio buttons

Question

I have two sets of radio buttons. One for the payment type, and one for the amount.

If the payment type is paid, I want to show the amount, if it's free I don't. I have it working mostly, but if a user switches from paid to free the amount buttons to remain.

How do I hide them, and set value to 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

Use the common name of the radio buttons as a selector instead of the id to attach the event to both radios then toggle the display using jQuery .toggle() method.

NOTE : I suggest the use of conditional (ternary) operator instead of @if/@endif, like :

<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

You need to listen for payment_type radio group i.e. ':radio[name=payment_type]' as of now you are only listen the change event of a single radio. i.e. #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>