动态切换HTML内容：基于复选框状态的显示与隐藏技术

<!-- 复选框 -->
<div class="row mb-3">
    <div class="form-check">
        <input type="checkbox"
               class="form-check-input switch checkbox-action"
               id="linkVideoCheckbox"
               name="link_video"
               value="0">
        <label class="form-check-label" for="linkVideoCheckbox">插入视频链接</label>
    </div>
</div>

<!-- 待显示/隐藏的字段，初始设置为隐藏 -->
<div class="row mb-3" id="videoLinkField" style="display: none;">
    <div class="col-md-6">
        <!-- 这是一个Laravel Blade语法，实际会渲染为HTML输入框 -->
        {!! 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>

// 引入jQuery库（如果尚未引入）
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

$(document).ready(function() {
    // 监听ID为 'linkVideoCheckbox' 的复选框的 'change' 事件
    $('#linkVideoCheckbox').on('change', function() {
        // 当复选框状态改变时，切换ID为 'videoLinkField' 的元素的显示状态
        $('#videoLinkField').toggle();
    });

    // 页面加载时，根据复选框的初始状态设置字段的显示状态
    // 如果复选框默认是选中的，则显示字段；否则隐藏。
    if ($('#linkVideoCheckbox').is(':checked')) {
        $('#videoLinkField').show();
    } else {
        $('#videoLinkField').hide();
    }
});

<!-- 复选框 -->
<div class="row mb-3">
    <div class="form-check">
        <input type="checkbox"
               class="form-check-input switch checkbox-action"
               id="linkVideoToggle"
               name="link_video"
               value="0">
        <label class="form-check-label" for="linkVideoToggle">插入视频链接</label>
    </div>
</div>

<!-- 上传视频区域 (默认显示) -->
<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($a->video_id) --}}
    <div class="col-md-12 uploaded-videos">
        <!-- 视频预览和删除按钮 -->
    </div>
    {{-- @endif --}}
</div>

<!-- 插入视频链接区域 (默认隐藏) -->
<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>

// 引入jQuery库（如果尚未引入）
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

$(document).ready(function() {
    const $linkVideoToggle = $('#linkVideoToggle');
    const $uploadVideoSection = $('#uploadVideoSection');
    const $insertLinkSection = $('#insertLinkSection');

    // 定义一个函数来处理显示/隐藏逻辑，方便复用
    function updateVideoSectionVisibility() {
        if ($linkVideoToggle.is(':checked')) {
            // 如果复选框被选中，显示插入链接区域，隐藏上传视频区域
            $uploadVideoSection.hide();
            $insertLinkSection.show();
        } else {
            // 如果复选框未选中，显示上传视频区域，隐藏插入链接区域
            $uploadVideoSection.show();
            $insertLinkSection.hide();
        }
    }

    // 页面加载时，根据复选框的初始状态设置区域的显示
    updateVideoSectionVisibility();

    // 监听复选框的 'change' 事件
    $linkVideoToggle.on('change', function() {
        updateVideoSectionVisibility();
    });
});