javascript - 设置第一个单选按钮检查并在 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>

标签： javascriptphpjqueryjquery-uijquery-events

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

});