根据用户单选输入有条件地显示表单域

基础概念

在Web开发中，根据用户的单选输入有条件地显示表单域是一种常见的交互设计。这种设计允许用户根据不同的选项选择性地填写表单的不同部分，从而提高用户体验和数据的准确性。

类型

基于单选的显示/隐藏：根据用户选择的单选按钮显示或隐藏特定的表单域。
基于多选的显示/隐藏：根据用户选择的多选框显示或隐藏特定的表单域。
基于下拉菜单的显示/隐藏：根据用户选择的下拉菜单项显示或隐藏特定的表单域。

应用场景

注册表单：根据用户选择的账户类型（如个人或企业）显示不同的字段。
订单表单：根据用户选择的配送方式显示不同的地址输入字段。
问卷调查：根据用户回答的前一个问题显示后续相关问题。

示例代码

以下是一个简单的HTML和JavaScript示例，展示如何根据用户选择的单选按钮动态显示或隐藏表单域：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conditional Form Fields</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form id="conditionalForm">
        <label>
            <input type="radio" name="accountType" value="personal" checked> Personal
        </label>
        <label>
            <input type="radio" name="accountType" value="business"> Business
        </label>
        <br><br>
        <div id="personalFields">
            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" name="firstName">
        </div>
        <div id="businessFields" class="hidden">
            <label for="companyName">Company Name:</label>
            <input type="text" id="companyName" name="companyName">
        </div>
    </form>

    <script>
        document.querySelectorAll('input[name="accountType"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'personal') {
                    document.getElementById('personalFields').classList.remove('hidden');
                    document.getElementById('businessFields').classList.add('hidden');
                } else if (this.value === 'business') {
                    document.getElementById('personalFields').classList.add('hidden');
                    document.getElementById('businessFields').classList.remove('hidden');
                }
            });
        });
    </script>
</body>
</html>