Question

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

我试图返回.val（）并读取输入元素的属性，如.attr（＆＃34; name＆＃34;），但所有内容都返回＆＃39; undefined＆＃39;。

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

  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

请检查我的snipet代码：

您应该声明要在查询中使用的类名 - ＆gt;当我们有很多divs
在用于获取值的函数中，您应该获得刚刚单击的目标元素。（event.currentTarget）
应使用forEach代替for
如果你从另一个动作（通过点击另一个元素）获得，你应该从父元素中获取子元素

希望它有用。

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;

动态读取无线电值;

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

这是您使用javascript为所选单选按钮获取价值的方法。这在this帖子中得到了回答。

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

2 个答案: