Javascript 从单选按钮获取数据_Javascript_Html_Forms_Radio Button

Javascript 从单选按钮获取数据

javascript html forms

Javascript 从单选按钮获取数据,javascript,html,forms,radio-button,Javascript,Html,Forms,Radio Button,我试图弄清楚，如果选择了无线电表单中的选项，如何检查和写入控制台。即使正确的选项被选中，我也会不断得到“未选中”。有什么想法吗？我更喜欢一个不需要的解决方案；我不包括JQuery，因为我学习HTML和JavaScript 谢谢 <body> <form id="office"> <label id="ques1"> question 1</label><br/> <div class="q1 wron

我试图弄清楚，如果选择了无线电表单中的选项，如何检查和写入控制台。即使正确的选项被选中，我也会不断得到“未选中”。有什么想法吗？我更喜欢一个不需要的解决方案；我不包括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>


问题1

回答1

回答2

回答3

回答4




window.onload=函数（）{
document.getElementById（'submit'）。onclick=function（）{
if（document.querySelector（'.q1错误q1a1'）。选中==true）{
console.log（'checked'）；
}否则{
console.log（“未检查”）；
}
};
};

您正在检查是否选中了

，而不是单选按钮

更改此行：

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

例如：

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

传递给

querySelector

函数的选择器中有一个小错误。div中的每个类名前面都应该有一个

选择器应如下所示

.q1.错误.q1a1

。然后可以查找该div内部的输入，例如

.q1.error.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');
    }
  }
}

…或

document.querySelector（'input[name=“question1”]：checked'）。值@Pamblam好的，很好。如果还有其他.q1a1
s，那可能更好。非常感谢您的回答！我尝试了第一个选项，得到了“无法读取null的属性‘checked’”。当我尝试“（'input[name=“question1”]：checked'）”时，我得到了“uncaughtreferenceerror:checkFunction未定义”任何其他选项？Thanks@user3185970我才意识到其中一个是错的。没有类.q1a1
-我把值
错当成了类
。很抱歉如果你想使用它，你必须给所有的无线电元素添加一个类。第二个更好，尤其是因为无线电元素的名称相同。@user3185970我现在删除了第一个。只需使用这一个。代码中的一个错误是document.querySelector（'.q1.error.q1a1'）
将无法访问，它就像document.querySelector（'.q1.error.q1a1'）
，但您到底想要什么？