正文

揭秘JS获取单选题选项的神奇技巧，轻松实现用户选择实时反馈！

/0 浏览量
0322

在网页开发中，单选题是常见的用户交互方式之一。JavaScript（JS）为我们提供了强大的功能，可以帮助我们轻松地获取单选题选项，并实现用户选择的实时反馈。本文将详细介绍如何在HTML中创建单选题，并使用JavaScript来获取用户的选项选择，同时提供实时反馈。

单选题HTML结构

首先，我们需要创建一个单选题的HTML结构。以下是一个简单的单选题示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选题示例</title>
</head>
<body>

<form id="quizForm">
    <p>1. JavaScript 的全称是什么？</p>
    <input type="radio" name="jsQuestion" value="A"> A. Java Script<br>
    <input type="radio" name="jsQuestion" value="B"> B. JavaScript<br>
    <input type="radio" name="jsQuestion" value="C"> C. Java<br>
    <input type="radio" name="jsQuestion" value="D"> D. None of the above<br>
    <button type="button" onclick="showSelected()">提交</button>
</form>

<div id="feedback"></div>

<script>
    // JavaScript 代码将放在这里
</script>

</body>
</html>

在这个例子中，我们有一个包含四个选项的单选题，用户需要从中选择一个答案。

获取单选题选项

为了获取用户的选项选择，我们需要使用JavaScript。以下是获取用户选择并显示在页面上的方法：

function showSelected() {
    var radios = document.getElementsByName("jsQuestion");
    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            document.getElementById("feedback").innerText = "您选择了: " + radios[i].value;
            break;
        }
    }
}

这段代码定义了一个名为 showSelected 的函数，该函数在用户点击提交按钮时被调用。它首先获取所有名为 “jsQuestion” 的单选按钮，然后遍历这些按钮，检查哪个按钮被选中。一旦找到选中的按钮，它就会更新页面上的 feedback 元素，显示用户的选择。

实现实时反馈

为了实现实时反馈，我们可以在用户选择每个选项时更新反馈信息。以下是如何实现这一功能的代码：

function updateFeedback() {
    var radios = document.getElementsByName("jsQuestion");
    for (var i = 0, length = radios.length; i < length; i++) {
        radios[i].addEventListener('change', function() {
            document.getElementById("feedback").innerText = "您选择了: " + this.value;
        });
    }
}

// 页面加载完成后调用 updateFeedback 函数
window.onload = updateFeedback;

在这段代码中，我们创建了一个名为 updateFeedback 的函数，它为每个单选按钮添加了一个 change 事件监听器。当用户改变选项时，该监听器会触发，并更新 feedback 元素的文本。

总结

通过以上方法，我们可以轻松地在网页上创建单选题，并使用JavaScript获取用户的选择，实现实时反馈。这些技巧不仅可以帮助我们提高用户体验，还可以在游戏、问卷调查等场景中发挥重要作用。希望本文能帮助你更好地掌握JavaScript在单选题中的应用。

-- 展开阅读全文 --