JavaScript——这个单选按钮被选中了吗？

Question

我正在尝试从 radio 表单中获取有关用户选择的数据。这是我尝试过的。

<form id="office">
    <label id="ques1"> question 1</label>
        <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/>
<input type="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script>
var answersQ01 = document.getElementsById(q1a1).value;

function checkFunction()
{
if (answersQ01.checked) {/*here i would like to know if it's checked or not*/}

};

这似乎不起作用。关于如何解决这个问题有什么想法吗？ 如果可能的话，我宁愿用 HTML 和 JavaScript 得到答案，因为我不懂 PHP 或 jQuery。

非常感谢!

附注 我将每个输入放在一个 div 中，以便我可以在 CSS 中为它们提供单独的设计。

Answer 1

试试这个代码，如果它不适合你，我会改进它。 (代码片段不允许您使用 form 标记)。

window.onload = function() {

  document.getElementById('submit').onclick = function() {
    if (document.getElementById('q1a1').checked == true) {
      console.log('checked');
    } else {
      console.log('not checked');
    }
  };
};

<!--<form id="office">-->
<label id="ques1">question 1</label>
<div class="q1 wrong q1a1">
  <input type="radio" name="question1" id="q1a1" 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/>
<input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" />
<!--</form>-->