Set first radio button check and get value in jquery

Question

I have 3 radio buttons and I was trying to set first radio button checked, I did it but I am not getting value with by default check first button. For that, I tried with .trigger('change) and .click() but didn't work.

Here is my screenshot of buttons:

If I click on it then I get value otherwise it's not giving his value.

Can someone tell me what's wrong I am doing?

$(document).ready(function() {
  $('.package_validity_child').each(function() {
    $("input[name='plan_name_selector']", this).get(0).checked = true;
  }).trigger('change');

  $('.plan_name').change(function() {
    var plan_name = $(".selected_plan_name").val();
    if (plan_name === 'Daily') {
      $('.days_names').css('display', 'none');
      $('.select_days').css('display', 'none');
    } else {
      $('.days_names').css('display', 'block');
      $('.select_days').css('display', 'block');
    }
  });

  $("input[name='plan_name_selector']").click(function() {
    var value = $("input[name='plan_name_selector']:checked").val();
    $('.selected_plan_name').val(value);
    $('.selected_plan_nameVal').html("You have chosen <b>" + value + "</b> validity.");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 1

As mentioned above you should add function call after initial checkbox manipulation. I'd advise you to create a separate function and call it to do your stuff. Also, might be quite useful to have only one change handler to do all your needs, without an additional click handler too. And you should give a try to jQuery function toggle which do the same functionality with display: none/bock; but in much easier way.

$(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.");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

I'm not quite sure, what you want to do, but I think you want on page load to have "Daily" in your text input ? If this is correct you should add some logic on page load, not only on click:

$(document).ready(function() {

    var value = $("input[name='plan_name_selector']:checked").val();
    $('.selected_plan_name').val(value);
    $('.selected_plan_nameVal').html("You have choosed <b>" + value + "</b> validity.");

    if (value === 'Daily') {
        $('.days_names').css('display', 'none');
        $('.select_days').css('display', 'none');
    } else {
        $('.days_names').css('display', 'block');
        $('.select_days').css('display', 'block');
    }

    $('.package_validity_child').each(function() {
        $("input[name='plan_name_selector']", this).get(0).checked = true;
    }).trigger('change');

    $('.plan_name').change(function() {
        var plan_name = $(".selected_plan_name").val();
        if (plan_name === 'Daily') {
            $('.days_names').css('display', 'none');
            $('.select_days').css('display', 'none');
        } else {
            $('.days_names').css('display', 'block');
            $('.select_days').css('display', 'block');
        }
    });

    $("input[name='plan_name_selector']").click(function() {
        var value = $("input[name='plan_name_selector']:checked").val();
        $('.selected_plan_name').val(value);
        $('.selected_plan_nameVal').html("You have choosed <b>" + value + "</b> validity.");
    });
});

<html>
    <head>
        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
        </script>
    </head>
<body>
<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" checked>
        <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>
</body>
</html>

Answer 3

You can use function to call in events. Please view example code:

$(document).ready(function() {
  $('input[name="plan_name_selector"]:first').attr("checked", true);
  check_plan_name_selector();

  $('.plan_name').change(function() {
    check_plan_name();
  });

  $("input[name='plan_name_selector']").click(function() {
    check_plan_name_selector();
  });

  function check_plan_name_selector()
  {
    var value = $("input[name='plan_name_selector']:checked").val();
    $('.selected_plan_name').val(value);
    $('.selected_plan_nameVal').html("You have choosed <b>" + value + "</b> validity.");
  }

  function  check_plan_name()
  {
    var plan_name = $(".selected_plan_name").val();
    if (plan_name === 'Daily') {
      $('.days_names').css('display', 'none');
      $('.select_days').css('display', 'none');
    } else {
      $('.days_names').css('display', 'block');
      $('.select_days').css('display', 'block');
    }
  }

});