jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="package_validity_child">
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
    <label class="custom-control-label" for="daily">Daily</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
    <label class="custom-control-label" for="weekly">Weekly</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
    <label class="custom-control-label" for="monthly">Monthly</label>
  </div>
  <input type="" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>

JavaScript

$(document).ready(function() {
  $('.package_validity_child').each(function() {
    const $firstCb = $(this).find("input[name='plan_name_selector']").first();
    $firstCb.prop('checked', true);
    showValue(firstCb.val());
  });

  $('.plan_name').on('change', function() {
    const hideDays = $(this).val() !== 'Daily';
    $('.days_names').toggle(hideDays);
    $('.select_days').toggle(hideDays);

    showValue($(this).val());
  });

  function showValue(value) {
    $('.selected_plan_name').val(value).html("You have choosed <b>" + value + "</b> validity.");
  }
});