从单选按钮获取数据

Question

我正在尝试弄清楚如果选择了无线电形式的选项，如何检查和写入控制台。我一直收到 "Not checked"，即使选中了正确的选项。有任何想法吗？我更喜欢不包含 JQuery 的解决方案，因为我研究了 HTML 和 JavaScript.

谢谢！！

<body>
<form id="office">
    <label id="ques1"> question 1</label><br/>
        <div class="q1 wrong q1a1"><input type="radio" name="question1"    value="q1a1" /> Answer1 <br/></div>
        <div class="q1 wrong q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
        <div class="q1 wrong q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
        <div class="q1 right q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>

            <br/><br/>

     <input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />


</form>


<script type="text/javascript">

window.onload = function() {

 document.getElementById('submit').onclick = function() {
if (document.querySelector('.q1 wrong q1a1').checked == true) {
  console.log('checked');
} else {
  console.log('not checked');
}
};
};
</script>
</body>

Answer 1

您正在检查 <div> 是否被选中，而不是单选按钮。

更改此行：

if (document.querySelector('.q1 wrong q1a1').checked == true) {

类似于：

if (document.querySelector('input[type=radio][name=question1]').checked == true) {

Answer 2

您传递给 querySelector 函数的选择器存在轻微错误。 div 中的每个类名都应在前面加上 . 选择器应如下所示 .q1.wrong.q1a1。然后您可以查找 div 中的输入 .q1.wrong.q1a1 input

window.onload = function() {
  document.getElementById('submit').onclick = function() {
    if (document.querySelector('.q1.wrong.q1a1 input').checked == true) {
      console.log('checked');
    } else {
      console.log('not checked');
    }
  }
}

从单选按钮获取数据

Getting data from radio button

html

javascript

forms

radio-button