如何使用 JQuery 读取单选按钮值

Question

我正在使用 JQuery 呈现带有单选按钮的表单，然后在单击提交按钮时尝试读取所选单选选项的值。但是我得到的只是未定义的值。

我尝试返回 .val() 并读取输入元素的属性，例如 .attr("name")，但所有内容都返回 'undefined'。

这是我在表单中创建输入元素的方法：

  let options = $("<div></div>");
  for (let answer of questionnaire[currentQuestion].answers) {
    let a = $("<input></input>").attr({
      "name":questionnaire[currentQuestion].name,
      "type":"radio",
      "value":answer.value
    });
    let l = $("<label></label>").text(answer.label);
    options.append(a,l);
  }

在浏览器页面中检查 HTML 元素时，每个输入元素如下所示：

<input name="comfortfood" type="radio" value="steak">
<label>Medim-rare flat iron Steak</label>

这就是我尝试读取值的方式：

$('input:radio[name='+questionnaire[currentQuestion].name+']:checked').val()

我在这里检查了其他线程（如this one），但仍然无法让我的代码工作。我对这一切都很陌生，所以可能遗漏了一些明显的东西。

编辑：我最终在每个单选按钮上创建了一个点击事件，然后按照@Sakata Gintoki 在下面的评论中的建议使用event.currentTarget 读取值

Answer 1

请检查我的代码如下：

1. 您应该声明要在查询中使用的类名 -> 当我们有很多 divs 时避免混淆

2. 在用于获取值的函数中，您应该准确获取刚刚单击的目标元素。 (event.currentTarget)

3. 应使用forEach 而不是for

4. 如果你从另一个动作中获取（通过点击另一个元素），你应该从父元素获取子元素

希望有用。

let answers = [
    {
      label: 'A',
      value: 1
    },
    {
      label: 'B',
      value: 2
    },
    {
      label: 'C',
      value: 1
    }
  ];
  
  let options = $(".your-options");
  let message1El = $(".message-1");
  let message2El = $(".message-2");
  answers.forEach(answer => {
    let a = $("<input></input>").attr({
      "name": 'question',
      "type":"radio",
      "value": answer.value
    });
    let l = $("<label></label>").text(answer.label);
    options.append(a, l);
  });
  
  $('input:radio[name="question"]').on('click', (event) => {
  let currentEl = event.currentTarget;
    if (currentEl.checked) {
      message1El.html('Option ' + currentEl.value + ' has just selected');
    }
  });
  
  // in case you get from other
  $('.check-selected-radio').on('click', () => {
    let checkedEl = $('.your-options').find('input:checked');
    
    if (checkedEl.length) {
      message2El.html('Ah ha! Option ' + checkedEl.val() + ' was selected');
    }
    
  });

.your-options,
.message {
  margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="your-options"></div>
<div class="message message-1"></div>
<div class="message message-2"></div>
<button class="check-selected-radio">Check selected radio</button>

Answer 2

document.querySelector('input[name="comfortfood"]:checked').value;

动态读取 Radio 值；

document.querySelector('input[name="'+questionnaire[currentQuestion].name+'"]:checked').value;

这是您如何使用 javascript 为选定的单选按钮获取价值的方法。 这在前面的this 线程中得到了回答。