反馈表单中单选按钮值的检索问题

Question

我正试着建立一个简单的反馈表格。用户将回答一系列“是”或“否”问题。如果他们选择“否”，那么他们将得到一个包含文本的评论表格。

目前，我在检索单选按钮值时遇到了问题。我正在尝试在控制台中打印它们，但是当我选择适当的选择时，不会发生任何事情。如果用户选择“否”，它需要能够记住将被提交的评论。

我的JSFiddle在这里：http://jsfiddle.net/787x18vx/

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

jQuery

var firstInput = 'input[name=choice]';
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
});

Answer 1

您使用的是不存在的input[name=choice]选择器。

使用input[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
});

小提琴

Answer 2

var firstInput = 'input[name=choice]'; --这是在寻找一些特定名称为choice的东西，它似乎不在您的html中。

关于这个问题有两种快速的方法。首先，只需更改您的选择器：

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

这将触发任何无线电的点击功能。

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

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

^应该使任何以choice开头的输入都被选中。

这个方法应该有效，但是针对input[type=radio]可能是一个更好的解决方案，

Answer 3

你错过了你名字中的-1

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