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

如上所述，您应该在初始 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 2

您可以使用函数来调用事件。请查看示例代码：

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