Javascript 检索反馈表单的单选按钮值时出现问题

我试图建立一个简单的反馈表。用户将回答一系列是或否的问题。如果他们选择否，则会向他们提供包含文本的评论表单

目前，我在检索单选按钮值时遇到问题。我试图在控制台中打印它们，但是当我选择适当的选项时，什么也没有发生。如果用户选择“否”，则需要能够记住将提交的评论

我的JSFIDLE在这里：

HTML

<p>You are providing feedback</p>
<form>
  <div id="question-1">
    <label for="question-1">Is this correct?</label>
    <input type="radio" value="yes" name="choice-1" />Yes
    <input type="radio" value="no" name="choice-1" />No
  </div>
  <div id="question-2">
    <label for="question-2">Another question</label>
    <input type="radio" value="yes" name="choice-2" />Yes
    <input type="radio" value="no" name="choice-2" />No
  </div>
  <div id="question-3">
    <label for="question-3">One more question</label>
    <input type="radio" value="yes" name="choice-3" />Yes
    <input type="radio" value="no" name="choice-3" />No
  </div>
  <br />
  <button>Send Feedback</button>
</form>

---

您正在使用不存在的

input[name=choice]

选择器

改用

输入[type=radio]

var firstInput = 'input[type=radio]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
  console.log(firstInputValue);
  console.log($('input[name="choice-1"]:checked').val());
  console.log($('input[name="choice-2"]:checked').val());
  // if value === 'no' show comment form
});

---

var firstInput='input[name=choice]
这是在寻找一个名为
choice
的东西，它似乎不在您的html中

有两种快速的方法。
首先，只需更改选择器：

$('input[type=radio]').on('click', function(){...

var firstInput = 'input[name^=choice]';

这将在单击任何收音机时触发该功能

另一种方法是使用通配符选择器：

$('input[type=radio]').on('click', function(){...

var firstInput = 'input[name^=choice]';

^
应进行选择，以便选择名称以
选项开头的任何输入

这种方法应该可以工作，但是针对
输入[type=radio]
可能是更好的解决方案，
您的名字中缺少了-1

var firstInput = 'input[name=choice-1]';

您的选择器正在尝试获取名称完全等于“choice”的标记。您可以使用以下内容按前缀进行搜索

var firstInput = 'input[name|="choice"]';

这将获得名称以“choice”开头的所有标签
为什么第一个值
在控制台中打印时未定义
？变量似乎不起作用。@mapr，因为您在单击事件外部设置了
firstInputValue
，而在初始状态下，该值是未定义的。@mapr我创建了一个函数，其中
firstInputValue
位于onclick事件函数内部。此外，这只是为了正确检索值而修复的一个答案，它不会显示这三个选项的所有值。它只显示第一个和第二个选项的值。@mapr太棒了！“很高兴能帮上忙。”brettkc谢谢你。我也喜欢这个解决方案……我应该使用
onclick
还是
onchange
？如果用户想返回并更改内容，该怎么办？我认为这两种方法都可以。更改将在首次单击时触发，然后在该值不变的情况下再进行任何单击。不管怎样，每次单击都会触发。这取决于你想做什么。