获取所选单选按钮的值无法正常工作

Question

我正在做一个测验，并且使用纯JS一切都很好，但是为了保持一致性，我想使用jQuery，但是jQuery一直在寻找单选选项的第一个值，而不是选定的选项。 jQuery可以解决什么问题？

的HTML

<form id='quiz'>
    <input type='radio' class='mc' name='q1' value='a1'>Answer 1<br>
    <input type='radio' class='mc' name='q1' value='a2'>Answer 2 <!-- Selected option -->
</form>

JS

var a1 = document.quiz.q1.value;
alert(a1) // output is: a2

var a1 = $('#quiz').find('input[name="q1"]').val();
alert(a1) // output is: a1

Answer 1

这是获取第一个值而不是所选选项的值的jQuery（或JavaScript）行为。 使用jQuery时必须使用:checked ：

 $(function () { var a = $('#quiz').find('input[name="q1"]:checked').val(); console.log(a); $("button").click(function () { var a = $('#quiz').find('input[name="q1"]:checked').val(); console.log(a); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id='quiz'> <label><input type='radio' class='mc' name='q1' value='a1'>Answer 1</label><br> <label><input type='radio' class='mc' name='q1' value='a2' checked="checked">Answer 2 </label><!-- Selected option --> </form> <button>Check Selected</button> 

在上面的代码段中，尝试选择某些内容，然后单击按钮以查看选择的值。 另外，默认情况下，我已经检查了第二个答案。 :)希望这会有所帮助。