Показать / скрыть радиокнопки на основе других радиокнопок

У меня есть два набора переключателей. Один для типа оплаты и один для суммы.

Если тип оплаты платный, я хочу показать сумму, если бесплатный - нет. У меня он в основном работает, но если пользователь переключается с платного на бесплатный, кнопки суммы остаются.

Как мне скрыть их и установить значение 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>

javascript jquery html radio-button toggle

15.10.2018 13:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 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>

15.10.2018 13:33

Используйте общее имя переключателей в качестве селектора вместо 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>

Привет @Andre, пожалуйста, если какой-либо ответ поможет вам проголосовать за него, если какой-либо ответ - это то, что вы ищете, отметьте его как правильный ответ для будущих читателей.

— 24.10.2018 10:47

15.10.2018 13:36