javascript - 如何获取输入单选按钮的值并根据答案执行某些操作？

Question

我实际上是在做一个 10 个问题的测验。我知道有很多方法可以做到这一点，并且有很多关于如何获取输入单选按钮的值的答案，但我只是不太明白!我对“required”属性和“on('valid.fndtn.abide')”使用 Foundation 5 的 Abide 验证，这只是确保立即选择答案。

HTML

<h2>Choose one answer:</h2>
<div class="radio">
    <div class="input-radio"><input type="radio" name="question_10" value="Wrong" id="option_37" required><label for="option_37">Answer 37</label></div>
    <div class="input-radio"><input type="radio" name="question_10" value="Wrong" id="option_38" required><label for="option_38">Answer 38</label></div>
    <div class="input-radio"><input type="radio" name="question_10" value="Wrong" id="option_39" required><label for="option_39">Answer 39</label></div>
    <div class="input-radio"><input type="radio" name="question_10" value="Correct" id="option_40" required><label for="option_40">Answer 40</label></div>
</div>

我现在拥有的Javascript(没有其他东西)。现在，即使我选择了正确的答案，也会返回“否”。如果我将所有答案都设置为“正确”，它将返回"is"。

$(document).ready(function(){
    $('.form-prepare').on('valid.fndtn.abide', function(e) {
        var answer10 = $("input[name='question_10']").val();

        if (answer10 === "Correct") { alert("Yes!"); } 
        else { alert("No!"); 
        e.preventDefault();
    });
});

编辑:删除了问题的第二部分，因为我认为它本身可能是它自己的问题。根据答案，我缺少输入变量的 :checked 部分。谢谢!

Answer 1

当选择器返回集合时，jQuery 的 .val() 方法只会返回第一个元素的值，因此您始终检索名称等于 Question_10 的第一个输入的值.

要正确检索您需要的值，您需要将选择器限制为仅返回选中的元素，如下所示:

$("input[name='question_10']:checked").val();