我正在尝试构建一个简单的反馈表单。用户将回答一系列是或否的问题。如果他们选择否,那么他们将被提供一个评论表格以包含文本。
目前,我在检索单选按钮值时遇到问题。我试图在控制台中打印它们,但是当我选择合适的选择时没有任何反应。如果用户选择“否”,则需要能够记住将要提交的评论。
我的JSFiddle在这里:http://jsfiddle.net/787x18vx/
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>
的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
});
答案 0 :(得分: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
});
答案 1 :(得分:1)
var firstInput = 'input[name=choice]';
这是专门用名称choice
寻找的东西,它似乎不在您的HTML中。
有两种快速方法。 首先,只需更改选择器:
$('input[type=radio]').on('click', function(){...
这将在点击任何无线电
时触发该功能另一种方法是使用通配符选择器:
var firstInput = 'input[name^=choice]';
^
应该是这样的,所以任何名称都以choice
开头的输入都会被选中。
此方法应该有效,但定位input[type=radio]
可能是更好的解决方案,
答案 2 :(得分:0)
您缺少姓名中的-1
site1.conf
site2.conf
site3.conf
答案 3 :(得分:0)
您的选择器正在尝试获取名称与“选择”完全相同的标记。您可以使用以下
按前缀搜索var firstInput = 'input[name|="choice"]';
这将获得名称以'choice'开头的所有标签