jquery 表单联动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。表单联动是指在一个表单中，一个或多个字段的值变化会自动影响其他字段的值或状态。

类型

基于选择器的联动：根据某个字段的值选择性地显示或隐藏其他字段。
基于事件的联动：当某个字段的值发生变化时，触发其他字段的值变化。
基于计算的联动：根据一个或多个字段的值计算出另一个字段的值。

应用场景

动态表单：根据用户的选择动态显示或隐藏表单字段。
数据验证：根据某个字段的值自动验证其他字段的值。
联动下拉菜单：根据一个下拉菜单的值动态改变另一个下拉菜单的选项。

示例代码

以下是一个简单的 jQuery 表单联动示例，当用户选择不同的选项时，显示不同的输入框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 表单联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <label for="category">选择类别:</label>
        <select id="category">
            <option value="general">一般</option>
            <option value="special">特殊</option>
        </select>

        <div id="generalFields" class="hidden">
            <label for="generalInput">一般输入:</label>
            <input type="text" id="generalInput">
        </div>

        <div id="specialFields" class="hidden">
            <label for="specialInput">特殊输入:</label>
            <input type="text" id="specialInput">
        </div>
    </form>

    <script>
        $(document).ready(function() {
            $('#category').change(function() {
                if ($(this).val() === 'general') {
                    $('#generalFields').removeClass('hidden');
                    $('#specialFields').addClass('hidden');
                } else if ($(this).val() === 'special') {
                    $('#generalFields').addClass('hidden');
                    $('#specialFields').removeClass('hidden');
                }
            });
        });
    </script>
</body>
</html>