如何根据Checkbox值实现HTML字段的显示与隐藏？

首先需要给两个内容区域添加标识类，方便控制显示隐藏，同时默认隐藏链接输入区域：

<!-- 视频上传区域：添加类video-upload-section -->
<div class="row video-upload-section">
    <!-- 原上传代码内容 -->
</div>

<!-- 视频链接输入区域：添加类video-link-section，默认隐藏 -->
<div class="row mb-3 video-link-section" style="display: none;">
    <!-- 原链接输入代码内容 -->
</div>

<!-- 给Checkbox添加ID，方便获取元素 -->
<div class="row mb-3">
    <label class="control-label">Link video</label>
    <input type="checkbox" name="link_video" id="linkVideoCheckbox" value="0" class="switch checkbox-action" />
</div>

下面提供三种常用实现方式，选适合你项目的即可：

1. 原生JavaScript实现 #

直接监听Checkbox的change事件，切换两个区域的显示状态，同时同步Checkbox的值：

// 获取元素
const checkbox = document.getElementById('linkVideoCheckbox');
const uploadSection = document.querySelector('.video-upload-section');
const linkSection = document.querySelector('.video-link-section');

// 监听切换事件
checkbox.addEventListener('change', function() {
    if (this.checked) {
        uploadSection.style.display = 'none';
        linkSection.style.display = 'block';
        this.value = '1'; // 勾选时设置值为1
    } else {
        uploadSection.style.display = 'block';
        linkSection.style.display = 'none';
        this.value = '0'; // 取消勾选时设置值为0
    }
});

// 页面加载时初始化状态（如果是编辑页面，需要根据已有数据设置）
window.addEventListener('DOMContentLoaded', function() {
    if (checkbox.checked) {
        uploadSection.style.display = 'none';
        linkSection.style.display = 'block';
    }
});

2. jQuery实现（项目已引入jQuery时用） #

利用jQuery的toggle方法快速切换显示状态：

$('#linkVideoCheckbox').on('change', function() {
    const isChecked = $(this).is(':checked');
    // 切换区域显示：上传区域在未勾选时显示，链接区域在勾选时显示
    $('.video-upload-section').toggle(!isChecked);
    $('.video-link-section').toggle(isChecked);
    // 同步Checkbox的值
    $(this).val(isChecked ? '1' : '0');
});

// 初始化状态
$(document).ready(function() {
    if ($('#linkVideoCheckbox').is(':checked')) {
        $('.video-upload-section').hide();
        $('.video-link-section').show();
    }
});

3. Vue.js实现（项目用Vue框架时优先推荐） #

因为你的代码里出现了<input-dropzone>这类Vue组件，用Vue的响应式绑定最方便：

第一步：在Vue实例中定义响应式数据 #

new Vue({
    el: '#your-app-container', // 替换成你的Vue挂载容器
    data() {
        return {
            linkVideo: false // 默认未勾选，对应显示上传区域
        }
    },
    mounted() {
        // 如果是编辑页面，从后端数据初始化状态
        // 比如：this.linkVideo = {{ $a->link_video == 1 ? 'true' : 'false' }};
    }
});

第二步：修改HTML模板，用v-show控制显示 #

<!-- Checkbox绑定响应式数据 -->
<div class="row mb-3">
    <label class="control-label">Link video</label>
    <input type="checkbox" name="link_video" v-model="linkVideo" class="switch checkbox-action" />
    <!-- 若需要提交值为0/1，可改为：:value="1" v-model="linkVideo" -->
</div>

<!-- 上传区域：未勾选时显示 -->
<div class="row" v-show="!linkVideo">
    <!-- 原上传代码内容 -->
</div>

<!-- 链接输入区域：勾选时显示 -->
<div class="row mb-3" v-show="linkVideo">
    <!-- 原链接输入代码内容 -->
</div>

Vue会自动根据linkVideo的布尔值切换两个区域的显示，不需要手动操作DOM，更符合Vue的开发规范。

内容的提问来源于stack exchange，提问作者Carlos