从单选按钮获取数据

Getting data from radio button

本文关键字：数据 获取 单选按钮      更新时间：2023-09-26

如果选择了单选表单中的选项，我正试图弄清楚如何检查并写入控制台。即使选中了正确的选项，我也会不断地得到"未选中"。有什么想法吗？我更喜欢这样的解决方案；我不包括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>

您检查的是<div>，而不是单选按钮。

更改此行：

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

类似于：

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

传递给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');
    }
  }
}
相关文章：