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

Posted

技术标签:

【中文标题】如何在 JavaScript 中访问 HTML 单选的值【英文标题】：How to access values of HTML radio in JavaScript 【发布时间】：2021-11-07 03:46:03 【问题描述】：

我正在尝试使用 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>

【问题讨论】：

这能回答你的问题吗？ Checking Value of Radio Button Group via JavaScript? 提示，您在 input 元素上缺少 ac common name 属性以形成单选按钮组。 嘿，我像您和其他人建议的那样编辑了名称标签，现在我可以让它在 1 个问题后显示我的答案。你知道我怎样才能记住所有答案并在最后显示吗？ 【参考方案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>

【讨论】：

它按您的建议工作（放置 document.write(rb.value) 显示您选择的字母。但我的字典没有保存增量。我怎样才能使代码显示在最后你选了什么答案？ 我已经编辑了我的原始帖子以包含我完整的 javascript 文件。【参考方案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>

【讨论】：

感谢您的回答@mahi 我已经更改了我的代码。我还有最后一个问题；你知道我可以在最后显示我选择的答案吗？它只适用于 1 个答案。 你在尝试这个吗-让 incrementVal = dict[rb.value] + 1;如果它不起作用，您可以为您的查询创建一个 sn-p（在工具栏中添加 js/html sn-p 选项）。【参考方案3】：

看起来你应该使用这个：

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

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

【讨论】：

以上是关于如何在 JavaScript 中访问 HTML 单选的值的主要内容，如果未能解决你的问题，请参考以下文章

使用 JavaScript 在控制台中单击任何单选按钮时如何显示特定值？

如何使用单机单网卡实现公司内外网访问

xml标签内的html标签-如何在javascript中访问？

在javascript和html中对单引号进行操作[重复]

当数据来自数据库时，如何一次只选择一个单选按钮并在javascript中取消选择其他单选按钮？

HTML/Javascript：如何访问在带有 src 集的脚本标签中加载的 JSON 数据