基于复选框状态动态控制HTML字段显示与隐藏的教程-js教程-PHP中文网

基于复选框状态动态控制HTML字段显示与隐藏的教程

本教程详细介绍了如何利用HTML、CSS和JavaScript（特别是jQuery）实现基于复选框选中状态动态显示或隐藏页面上的不同内容区域。通过一个视频上传与链接插入场景的实例，展示了如何配置初始状态，并使用事件监听器响应用户交互，从而优化用户界面体验。

在现代web开发中，根据用户的选择动态调整页面内容是提升用户体验的关键一环。例如，当用户勾选某个选项时，显示相关的输入字段；取消勾选时，则隐藏这些字段。本文将以一个具体的场景为例，详细讲解如何使用html、css和jquery实现基于复选框状态的html字段显示与隐藏功能。

场景描述：复选框控制内容切换

假设我们需要提供两种方式让用户上传视频：一种是直接上传视频文件，另一种是提供视频链接。通过一个复选框来切换这两种模式：

默认情况下（复选框未选中），显示“上传视频”区域。
当用户选中复选框时，隐藏“上传视频”区域，并显示“插入视频链接”区域。

为了实现这一功能，我们需要定义两个不同的HTML内容块，并利用JavaScript来控制它们的可见性。

HTML结构准备

首先，为两个需要切换显示的内容区域分别添加一个唯一的ID，并设置好它们的初始显示状态。默认情况下，“上传视频”区域可见，“插入视频链接”区域隐藏。

<!-- 复选框：用于切换视频上传方式 -->
<div class="row mb-3">
    <div class="form-check">
        <input type="checkbox"
            class="form-check-input switch checkbox-action"
            id="link_video_checkbox"
            name="link_video"
            value="0"
        />
        <label class="form-check-label" for="link_video_checkbox">链接视频</label>
    </div>
</div>

<!-- 区域1：上传视频 (默认可见) -->
<div class="row" id="uploadVideoSection">
    <div class="col-md-12 mb-3">
        <p>在此处放置视频文件</p>
        {!! Form::hidden('temp_video_filename') !!}
        <input-dropzone
            name="video-dropzone"
            label="Dropzone"
            url="/admin/object/upload-video"
            :config="{
                clickable:true,
                chunking:true,
                chunkSize: 250000,
                parallelUploads: 1,
                uploadMultiple: false,
                maxFilesize: 1000,
                maxFiles: 1,
                acceptedFiles: '.mov, .mp4'
            }"
            @click="initVideoUpload()"
            @drop="initVideoUpload()"
            @upload="videoUploaded($event)"
        />
    </div>
    @if(isset($a) && $a->video_id)
    <div class="col-md-12 uploaded-videos">
        <a href="{{ $a->getDirectPlayUrl() }}" target="_blank" class="btn btn-primary download">
            <i class="fa fa-play"></i> 查看视频
        </a>
        <button class="btn btn-danger btn-rounded btn-delete remove" data-record="File" data-url="{{ $a->getAdminVideoRemoveApiUrl() }}" data-callback-function="A.removedAdminVideo">
            <icon-delete color="var(--on-error)"></icon-delete> 移除文件
        </button>
    </div>
    @endif
</div>

<!-- 区域2：插入视频链接 (默认隐藏) -->
<div class="row mb-3" id="insertLinkSection" style="display: none;">
    <div class="col-md-6">
        {!! Form::field('video_embed_url', ['label' => __('labels.link_video')]) !!}
    </div>
    <div class="w-100"></div>
    <div class="col-md-6">
        {!! Form::label(__('labels.preview')) !!}
    </div>
</div>

登录后复制

关键点：

立即学习“前端免费学习笔记（深入）”；

为复选框添加 id="link_video_checkbox"，以便JavaScript可以轻松引用。
为“上传视频”区域添加 id="uploadVideoSection"。
为“插入视频链接”区域添加 id="insertLinkSection"，并设置 style="display: none;"，使其默认隐藏。

JavaScript（jQuery）实现逻辑

接下来，我们使用jQuery来监听复选框的 change 事件。当复选框的状态发生变化时，根据其是否被选中来决定显示哪个区域，隐藏哪个区域。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 获取复选框和两个内容区域的DOM元素
    const $linkVideoCheckbox = $('#link_video_checkbox');
    const $uploadVideoSection = $('#uploadVideoSection');
    const $insertLinkSection = $('#insertLinkSection');

    // 定义一个函数来根据复选框状态更新显示
    function updateVisibility() {
        if ($linkVideoCheckbox.is(':checked')) {
            // 复选框被选中：显示链接输入区域，隐藏上传区域
            $uploadVideoSection.hide();
            $insertLinkSection.show();
        } else {
            // 复选框未选中：显示上传区域，隐藏链接输入区域
            $uploadVideoSection.show();
            $insertLinkSection.hide();
        }
    }

    // 页面加载完成后，根据复选框的初始状态设置一次显示
    updateVisibility();

    // 监听复选框的change事件
    $linkVideoCheckbox.on('change', function() {
        updateVisibility(); // 调用函数更新显示
    });
});
</script>

登录后复制

代码解析：

$(document).ready(function() { ... });: 确保在DOM完全加载后执行JavaScript代码，避免因元素未加载而导致的错误。
选择器: 使用jQuery的选择器 (#id) 获取对应的HTML元素。
updateVisibility() 函数: 这是一个封装了显示/隐藏逻辑的函数。它检查 $linkVideoCheckbox.is(':checked') 来判断复选框是否被选中。
- 如果选中，$uploadVideoSection.hide() 隐藏上传区域，$insertLinkSection.show() 显示链接区域。
- 如果未选中，则执行相反的操作。
初始状态设置: 在页面加载时，立即调用 updateVisibility() 一次，确保页面在初次加载时就根据复选框的默认状态正确显示内容。
事件监听: $linkVideoCheckbox.on('change', function() { ... }); 监听复选框的 change 事件。每当用户点击复选框使其状态改变时，就会触发此事件，并再次调用 updateVisibility() 来更新页面的显示。

完整代码示例

将上述HTML结构和JavaScript代码结合起来，即可实现所需功能。请确保在HTML文件的 <head> 或 <body> 底部引入jQuery库。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态控制HTML字段显示</title>
    <!-- 引入Bootstrap CSS (可选，但示例中使用了Bootstrap样式) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 示例中可能需要的一些自定义样式 */
        .switch {
            /* 模拟开关样式，如果使用Bootstrap自带的form-check-input则无需 */
            width: 40px;
            height: 20px;
            -webkit-appearance: none;
            outline: none;
            background: #c6c6c6;
            border-radius: 10px;
            position: relative;
            cursor: pointer;
            transition: .3s;
        }
        .switch:checked {
            background: #007bff; /* Bootstrap primary color */
        }
        .switch::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            top: 1px;
            left: 1px;
            transition: .3s;
        }
        .switch:checked::before {
            left: 21px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2 class="mb-4">视频上传方式选择</h2>

        <!-- 复选框：用于切换视频上传方式 -->
        <div class="row mb-3">
            <div class="form-check">
                <input type="checkbox"
                    class="form-check-input switch checkbox-action"
                    id="link_video_checkbox"
                    name="link_video"
                    value="0"
                />
                <label class="form-check-label" for="link_video_checkbox">链接视频</label>
            </div>
        </div>

        <!-- 区域1：上传视频 (默认可见) -->
        <div class="row" id="uploadVideoSection">
            <div class="col-md-12 mb-3">
                <p>在此处放置视频文件</p>
                <!-- {!! Form::hidden('temp_video_filename') !!} 示例中省略Laravel Blade语法 -->
                <div style="border: 2px dashed #ccc; padding: 20px; text-align: center;">
                    <p>视频拖放区域 (Dropzone)</p>
                    <!-- <input-dropzone ... /> 示例中省略Vue/Blade组件 -->
                </div>
            </div>
            <!-- @if(isset($a) && $a->video_id) 示例中省略Laravel Blade语法 -->
            <div class="col-md-12 uploaded-videos mt-2">
                <a href="#" target="_blank" class="btn btn-primary download">
                    <i class="fa fa-play"></i> 查看视频
                </a>
                <button class="btn btn-danger btn-rounded btn-delete remove">
                    <i class="fa fa-times"></i> 移除文件
                </button>
            </div>
            <!-- @endif -->
        </div>

        <!-- 区域2：插入视频链接 (默认隐藏) -->
        <div class="row mb-3" id="insertLinkSection" style="display: none;">
            <div class="col-md-6">
                <label for="video_embed_url" class="form-label">视频链接</label>
                <input type="text" class="form-control" id="video_embed_url" name="video_embed_url" placeholder="请输入视频链接">
                <!-- {!! Form::field('video_embed_url', ['label' => __('labels.link_video')]) !!} 示例中省略Laravel Blade语法 -->
            </div>
            <div class="w-100"></div>
            <div class="col-md-6 mt-3">
                <label class="form-label">预览</label>
                <div style="border: 1px solid #eee; padding: 10px; min-height: 50px; background-color: #f9f9f9;">
                    视频预览区域
                </div>
            </div>
        </div>
    </div>

    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Bootstrap JS (可选) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
    $(document).ready(function() {
        const $linkVideoCheckbox = $('#link_video_checkbox');
        const $uploadVideoSection = $('#uploadVideoSection');
        const $insertLinkSection = $('#insertLinkSection');

        function updateVisibility() {
            if ($linkVideoCheckbox.is(':checked')) {
                $uploadVideoSection.hide();
                $insertLinkSection.show();
            } else {
                $uploadVideoSection.show();
                $insertLinkSection.hide();
            }
        }

        // 页面加载时设置初始状态
        updateVisibility();

        // 监听复选框的change事件
        $linkVideoCheckbox.on('change', function() {
            updateVisibility();
        });
    });
    </script>
</body>
</html>

登录后复制

注意事项

jQuery引入: 确保在执行任何jQuery代码之前，页面已经正确引入了jQuery库。通常将其放在 <body> 标签的底部，</body> 结束标签之前。

芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情
ID的唯一性: 每个HTML元素的ID必须是唯一的，这是JavaScript正确引用元素的基础。
初始状态: 务必在页面加载时设置好元素的初始显示状态。在示例中，我们通过CSS display: none; 和在 $(document).ready() 中调用 updateVisibility() 来实现。
可访问性 (Accessibility): 对于依赖JavaScript来显示/隐藏内容的场景，应考虑无障碍性。例如，如果用户禁用JavaScript，或者使用屏幕阅读器，他们可能无法访问隐藏的内容。在某些情况下，可以考虑使用ARIA属性（如 aria-hidden）来提供额外的信息。

纯JavaScript实现: 如果项目不希望引入jQuery，可以使用原生JavaScript实现相同的功能，通过 document.getElementById() 获取元素，并修改其 style.display 属性。例如：

document.addEventListener('DOMContentLoaded', function() {
    const linkVideoCheckbox = document.getElementById('link_video_checkbox');
    const uploadVideoSection = document.getElementById('uploadVideoSection');
    const insertLinkSection = document.getElementById('insertLinkSection');

    function updateVisibilityNative() {
        if (linkVideoCheckbox.checked) {
            uploadVideoSection.style.display = 'none';
            insertLinkSection.style.display = ''; // 或 'block' / 'flex' 等
        } else {
            uploadVideoSection.style.display = '';
            insertLinkSection.style.display = 'none';
        }
    }

    updateVisibilityNative();
    linkVideoCheckbox.addEventListener('change', updateVisibilityNative);
});

登录后复制

CSS类切换: 对于更复杂的显示/隐藏逻辑或动画效果，可以考虑通过添加/移除CSS类来控制元素的可见性，而不是直接操作 display 属性。例如，定义 .hidden { display: none; } 类，然后使用 $(element).toggleClass('hidden');。
框架集成: 如果使用Bootstrap等CSS框架，可以利用其提供的组件，如 Collapse 组件，实现更平滑的显示/隐藏过渡效果。

总结

通过本教程，我们学习了如何利用HTML、CSS和JavaScript（特别是jQuery）实现基于复选框状态的动态内容切换。这种技术在表单、设置页面和交互式仪表板中非常常见，能够显著提升用户界面的灵活性和用户体验。无论是采用简单的 show()/hide() 方法，还是结合更复杂的动画效果或框架功能，核心原理都是监听用户交互，并根据逻辑判断来调整元素的可见性。选择最适合项目需求和复杂度的实现方式，可以构建出响应迅速且用户友好的Web应用程序。

以上就是基于复选框状态动态控制HTML字段显示与隐藏的教程的详细内容，更多请关注php中文网其它相关文章！