Установите первую проверку переключателя и получите значение в jquery

Question

У меня есть 3 переключателя, и я пытался установить первый переключатель, отмеченный, я сделал это, но я не получаю значение с проверкой первой кнопки по умолчанию.Для этого я попытался с .trigger('change) и .click(), но не сработало.

Вот мой скриншот кнопок:

Если я нажму на него, то получу значение, иначе оно не даст его значения.

Может кто-нибудь сказать мне, что я не так делаю?

$(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

Вы можете использовать функцию для вызова событий.Пожалуйста, посмотрите пример кода:

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

});

Answer 2

Как упомянуто выше, вы должны добавить вызов функции после начальной checkbox манипуляции.Я бы посоветовал вам создать отдельную функцию и вызывать ее для выполнения ваших задач.Кроме того, может быть весьма полезным иметь только один обработчик change для выполнения всех ваших задач без дополнительного обработчика click.И вы должны попробовать функцию jQuery toggle , которая выполняет те же функции с display: none/bock;, но гораздо более простым способом.

$(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 3

Я не совсем уверен, что вы хотите сделать, но я думаю, что вы хотите, чтобы при загрузке страницы в текстовом вводе было "Ежедневно"?Если это правильно, вы должны добавить некоторую логику при загрузке страницы, а не только при нажатии:

$(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>