如何在 JavaScript 中访问 HTML 单选的值

Question

我正在尝试使用 HTML 收音机和 javascript 为网站制作一个简单的问卷。我正在尝试从我在以下行中实现的单选按钮访问值：

<body>
    <form class="questionForm" id="q1" data-question="1">
        <div>
            <p>Question 1</p>
            <p><input type="radio" value="a">A. Rustgeving</p>
            <p><input type="radio" value="b">B. Zingeving</p>
            <p><input type="radio" value="c">C. Duurzaamheid</p>
            <p><input type="radio" value="d">D. Verzuiling</p>
            <p><input type="radio" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende" onclick="check()">
    </form>
... et

我特别希望能够在我的 JavaScript 中操作/存储这些值（这样我就可以计算/平均答案分数）。我知道点击事件运行“检查”功能，我应该能够访问这些值，但我找不到确切的方法。目前我正在尝试以下几行：

function check() {
    var q1 = document.q1.value
    document.write(q1)
}

这里的 document.write() 被用作调试目的，这样我就可以看到我是否得到了正确的值。目前没有返回任何内容。你能帮帮我吗？

编辑：

它按照您的建议工作（放置 document.write(rb.value) 显示您选择的字母。但我的字典没有保存增量。我怎样才能制作代码以便在最后显示您选择的答案？例如；AABDC

完整的javascript：

const button = document.querySelector("#button")
button.addEventListener("click", e => {
    const rb = document.querySelector('input[name="_exam_"]:checked');
    //document.write(rb.value);
    dict("rb.value") = dict("rb.value") + 1;


})
//changes the a to 0 
var dict = {
    "a": 0,
    "b": 0,
    "c": 0,
    "d": 0,
    "e": 0,

};

$(document).ready(function () {
    //hide all questions
    $('.questionForm').hide();
    $('#results').hide();
    //show first question 
    $('#q1').show();

    $('#q1 #button').click(function () {
        $('.questionForm').hide();
        $('#q2').show();
        return false;
    });

    $('#q2 #button').click(function () {
        $('.questionForm').hide();
        $('#q3').show();
        return false;
    });

    $('#q3 #button').click(function () {
        $('.questionForm').hide();
        $('#q4').show();
        return false;
    });

    $('#q4 #button').click(function () {
        $('.questionForm').hide();
        $('#q5').show();
        return false;
    });

    $('#q5 #button').click(function () {
        $('.questionForm').hide();
        $('#results').show();
        //document.write('0');



        return false;
    });

});

和我的 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="STYLE.CSS">
    <title>Document</title>
</head>

<body>
    <form class="questionForm" id="q1" data-question="1">
        <div>
            <p>Question 1</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q2" data-question="2">
        <div>
            <p>Question 2</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q3" data-question="3">
        <div>
            <p>Question 3</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q4" data-question="4">
        <div>
            <p>Question 4</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q5" data-question="5">
        <div>
            <p>Question 5</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>


    <form class="questionForm" id="results" data-question="6">
        <p> here are your results</p>
    </form>
    </div>
    <script src="jquery.js"></script>
    <script src="quiz.js"></script>
</body>

</html>

Answer 1

1)您应该在每个radio button 上添加name 属性：

<p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>

2)可以将checked单选按钮的值设为

const rb = document.querySelector( 'input[name="_exam_"]:checked' );
console.log( rb.value );

const button = document.querySelector("#button")
button.addEventListener("click", e => {
  const rb = document.querySelector('input[name="_exam_"]:checked');
  console.log(rb.value);
})

<form class="questionForm" id="q1" data-question="1">
  <div>
    <p>Question 1</p>
    <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
    <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
    <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
    <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
    <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
  </div>
  <input id="button" type="button" value="Volgende">
</form>

Answer 2

使用选择器(#q1 input[type="radio"]:checked)

  function check(){
   var element = document.querySelector('#q1 input[type="radio"]:checked')        
 
 if(element){
   console.log(element.value)
 }

}

  <form class="questionForm" id="q1" data-question="1">
        <div>
            <p>Question 1</p>
            <p><input type="radio" value="a">A. Rustgeving</p>
            <p><input type="radio" value="b">B. Zingeving</p>
            <p><input type="radio" value="c">C. Duurzaamheid</p>
            <p><input type="radio" value="d">D. Verzuiling</p>
            <p><input type="radio" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende" onclick="check()">
    </form>

Answer 3

看起来你应该使用这个：

var q1 = document.getElementById('q1');

更多关于正确实现的信息可以在here.找到