jquery - 通过 jQuery 获取单选按钮选择的未定义

Question

我试图从用户选择的三个单选按钮之一中获取值。到目前为止，我的值返回未定义，我不清楚为什么。

这是我的 HTML:

<div class="tab-pane fade in active" id="step1">
  <div class="well">
    <label>Repetition Interval</label>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="daily">
      <label class="form-check-label time-interval" for="materialUnchecked">Daily</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="weekly">
      <label class="form-check-label time-interval" for="materialUnchecked">Weekly</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="monthly">
      <label class="form-check-label time-interval" for="materialUnchecked">Monthly</label>
    </div>
  </div>
</div>

这是我用来 try catch 值的 jQuery:

$("#step1").change(function () {
  const intervalValue = $("input[class='time-interval']:checked").val();
  console.log('intervalValue: ', intervalValue);
});

现在，当选择 HTML block 中的单选按钮时，该函数会触发，但是，正如我所说，该值是未定义。我在这里缺少什么？

Answer 1

您可以像这样重写事件:

$("[type=radio]").change(function () {
  const intervalValue = this.value;
  console.log('intervalValue: ', intervalValue);
  console.log('name:', this.name);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-pane fade in active" id="step1">
  <div class="well">
    <label>Repetition Interval</label>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="daily">
      <label class="form-check-label time-interval" for="materialUnchecked">Daily</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="weekly">
      <label class="form-check-label time-interval" for="materialUnchecked">Weekly</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input interval" name="monthly">
      <label class="form-check-label time-interval" for="materialUnchecked">Monthly</label>
    </div>
  </div>
</div>

$("#step1").change(...) :您正在尝试捕捉事件onchange关于<div> 。所以您可能想将其更改为 <input>相反。