将Radiobox按钮链接到输入

基础概念

Radiobox（单选按钮）是一种常见的用户界面元素，用于在一组选项中选择一个。每个单选按钮通常都有一个与之关联的值，当用户选择一个单选按钮时，相应的值就会被选中。

类型

单选按钮通常分为两种类型：

静态单选按钮：选项在页面加载时就已经确定，用户不能添加或删除选项。
动态单选按钮：选项可以根据用户的操作或其他条件动态添加或删除。

应用场景

单选按钮广泛应用于各种表单和用户界面中，例如：

性别选择
选项筛选
设置偏好

将Radiobox按钮链接到输入

假设我们有一个表单，用户需要选择一个选项，然后根据选择的选项显示相应的输入框。我们可以使用JavaScript来实现这一功能。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radiobox to Input</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="option" value="A"> Option A
        </label>
        <br>
        <label>
            <input type="radio" name="option" value="B"> Option B
        </label>
        <br>
        <div id="input-container">
            <!-- Input will be displayed here -->
        </div>
    </form>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('input[name="option"]');
    const inputContainer = document.getElementById('input-container');

    radioButtons.forEach(radioButton => {
        radioButton.addEventListener('change', function() {
            // Clear previous input
            inputContainer.innerHTML = '';

            // Create new input based on selected option
            const input = document.createElement('input');
            input.type = 'text';
            input.placeholder = `Enter details for ${radioButton.value}`;

            inputContainer.appendChild(input);
        });
    });
});

解释

HTML部分：我们创建了一个包含两个单选按钮的表单，并定义了一个用于显示输入框的容器input-container。
JavaScript部分：
- 我们监听DOMContentLoaded事件，确保DOM完全加载后再执行脚本。
- 获取所有的单选按钮，并为每个单选按钮添加change事件监听器。
- 当用户选择一个单选按钮时，清除之前的输入框，并根据选择的选项创建一个新的输入框并显示在input-container中。