选定后，隐藏单选按钮并在新div中显示选定的值

基础概念

在前端开发中，单选按钮（Radio Button）是一种常见的表单控件，用于在一组选项中选择一个。当用户选中某个单选按钮时，通常希望隐藏原始的单选按钮，并在一个新的<div>元素中显示选中的值。

类型

HTML/CSS：使用纯HTML和CSS实现。
JavaScript：使用JavaScript来控制单选按钮的选中状态和显示内容。
框架（如React, Vue, Angular）：在现代前端框架中，可以通过状态管理来实现这一功能。

应用场景

表单验证：在用户提交表单之前，显示选中的值以便用户确认。
动态内容展示：根据用户的选择动态更新页面内容。

示例代码（使用JavaScript和HTML）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Radio Button and Show Selected Value</title>
    <style>
        .hidden {
            display: none;
        }
        #selectedValue {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label>
            <input type="radio" name="option" value="Option 1" onclick="showSelectedValue()"> Option 1
        </label>
        <label>
            <input type="radio" name="option" value="Option 2" onclick="showSelectedValue()"> Option 2
        </label>
        <label>
            <input type="radio" name="option" value="Option 3" onclick="showSelectedValue()"> Option 3
        </label>
    </form>
    <div id="selectedValue"></div>

    <script>
        function showSelectedValue() {
            const form = document.getElementById('myForm');
            const selectedValueDiv = document.getElementById('selectedValue');
            const radios = form.querySelectorAll('input[type="radio"]');
            let selectedValue = '';

            radios.forEach(radio => {
                if (radio.checked) {
                    selectedValue = radio.value;
                    radio.classList.add('hidden');
                } else {
                    radio.classList.remove('hidden');
                }
            });

            selectedValueDiv.textContent = `Selected Value: ${selectedValue}`;
        }
    </script>
</body>
</html>