获取没有提交按钮的选定单选按钮

基础概念

单选按钮（Radio Button）是一种用户界面元素，允许用户在多个选项中选择一个。通常情况下，单选按钮会有一个与之关联的标签和一个可选的提交按钮。但在某些情况下，你可能希望获取选中的单选按钮的值而不需要提交按钮。

类型

静态单选按钮：传统的单选按钮，通常与提交按钮一起使用。
动态单选按钮：可以通过JavaScript或框架（如React、Vue）动态获取和处理选中的单选按钮的值。

应用场景

表单验证：在用户选择某个选项后立即进行验证。
数据筛选：根据用户选择的选项动态更新显示的数据。
配置设置：允许用户在不提交的情况下查看和修改配置。

问题及解决方法

问题：如何获取没有提交按钮的选定单选按钮的值？

原因

用户希望在不需要提交按钮的情况下获取选中的单选按钮的值。

解决方法

可以使用JavaScript来实现这一功能。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected Radio Button Value</title>
</head>
<body>
    <form id="myForm">
        <input type="radio" name="option" value="Option1"> Option 1<br>
        <input type="radio" name="option" value="Option2"> Option 2<br>
        <input type="radio" name="option" value="Option3"> Option 3<br>
    </form>
    <button onclick="getSelectedValue()">Get Selected Value</button>
    <p id="result"></p>

    <script>
        function getSelectedValue() {
            const form = document.getElementById('myForm');
            const radios = form.elements['option'];
            let selectedValue;

            for (let i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }

            document.getElementById('result').innerText = `Selected Value: ${selectedValue}`;
        }
    </script>
</body>
</html>