如何通过复选框选中/取消状态控制指定div的显示与隐藏？

没问题，这需求很常见，我给你整理了几种实用的实现方案，你可以根据自己的技术栈来选择：

第一步：补全HTML结构 #

首先你需要添加一个用于控制的复选框，完整的HTML结构如下：

<input type="checkbox" id="toggleCheckbox"> 点击切换按钮容器显示/隐藏

<!-- 你提供的目标div -->
<div class="ddown"> 
  <button class="dbtn">ABC</button> 
</div>

方案一：原生JavaScript实现（无依赖） #

这是最通用的方案，不需要任何第三方库：

// 获取页面元素
const toggleCheckbox = document.getElementById('toggleCheckbox');
const targetDiv = document.querySelector('.ddown');

// 监听复选框的状态变化事件
toggleCheckbox.addEventListener('change', function() {
  // 根据复选框是否选中，切换div的显示状态
  // 方式1：修改display属性
  targetDiv.style.display = this.checked ? 'block' : 'none';
  
  // 方式2：使用hidden属性（更简洁的布尔值控制）
  // targetDiv.hidden = !this.checked;
});

// 页面加载完成后初始化状态（可选，比如默认隐藏）
window.addEventListener('load', function() {
  targetDiv.style.display = toggleCheckbox.checked ? 'block' : 'none';
});

方案二：jQuery实现（如果项目已引入jQuery） #

如果你的项目已经在用jQuery，代码会更简洁：

// 监听复选框变化
$('#toggleCheckbox').on('change', function() {
  // toggle方法会根据参数自动切换显示/隐藏
  $('.ddown').toggle(this.checked);
});

// 页面初始化时设置初始状态
$(document).ready(function() {
  $('.ddown').toggle($('#toggleCheckbox').is(':checked'));
});

额外优化：添加平滑过渡效果 #

如果想要更友好的视觉体验，可以用CSS添加平滑过渡动画：

.ddown {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  height: auto;
  opacity: 1;
}

/* 隐藏状态的样式 */
.ddown.hidden {
  height: 0;
  opacity: 0;
}

然后修改JavaScript代码，改为切换CSS类：

toggleCheckbox.addEventListener('change', function() {
  // 第二个参数控制是否添加类：复选框选中时不添加hidden类，反之添加
  targetDiv.classList.toggle('hidden', !this.checked);
});

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