无需 JavaScript，仅通过现代 CSS 的 :has() 伪类与兄弟选择器即可实现复选框勾选时显示、取消勾选时隐藏目标 div，兼容性良好（Chrome 105+、Edge 105+、Safari 15.4+），代码简洁、无事件绑定冲突问题。
无需 javascript，仅通过现代 css 的 :has() 伪类与兄弟选择器即可实现复选框勾选时显示、取消勾选时隐藏目标 div，兼容性良好（chrome 105+、edge 105+、safari 15.4+），代码简洁、无事件绑定冲突问题。
在前端开发中，常需通过复选框（<input type="checkbox">）动态控制某个区域（如筛选面板、高级选项）的显隐状态。传统做法依赖 JavaScript 监听 click 或 change 事件，但容易因 DOM 加载时机、重复绑定、框架干扰（如 React/Vue 中表单控件受控逻辑）或页面重载导致状态错乱——正如提问者所遇：div 可显示却无法隐藏，或 onclick 不生效。
现代 CSS 提供了更优雅、声明式的解决方案：display 切换完全交由样式规则驱动，零 JS、零事件监听、零状态同步风险。
✅ 推荐方案：CSS :has() + 兄弟选择器
核心思路是利用 :has() 检测复选框是否被勾选，并结合相邻兄弟选择器（+）精准定位目标 <div>：<pre class="brush:php;toolbar:false;">/* 基础样式（始终生效） */
#showDiv {
width: 100%;
background-color: #252525;
color: #ffffff;
padding: 16px;
margin-top: 8px;
}
/* 默认隐藏：当 form 内存在未勾选的 checkbox 时 */
form.showhide:has(input:not(:checked)) + div {
display: none;
}
/* 显示条件：当 form 内存在已勾选的 checkbox 时 */
form.showhide:has(input:checked) + div {
display: block;
}</pre><p>对应 HTML 结构需确保 <code><form></form> 与 <div> 是相邻兄弟元素，且复选框位于 <code><form></form> 内部：
立即学习“前端免费学习笔记（深入）”；
<form class="showhide"> <input type="checkbox" id="checkbox-id"> <label for="checkbox-id">显示高级筛选</label> </form> <div id="showDiv">这里是需要动态显示/隐藏的内容区域</div>
? 关键说明：
:has(input:checked)表示“该<form></form>内部至少有一个被勾选的<input>”；+ div确保只影响紧邻其后的<div id="showDiv">，避免误触其他元素； <li>无需 <code>display: none初始声明——CSS 规则已覆盖默认行为，语义更清晰。⚠️ 注意事项与兼容性
- 浏览器支持：
@supports (selector(:has(*)))可做渐进增强。当前主流浏览器（Chrome ≥105, Edge ≥105, Safari ≥15.4, Firefox ≥121）均已支持。旧版浏览器可回退至 JS 方案（见下方备选）。- DOM 结构严格性：
<form></form>与<div> 必须为同级相邻元素；若中间插入其他标签（如 <code><p></p>），+选择器将失效，此时应改用~（后续兄弟选择器）并确保结构可控。- 无障碍友好：建议为复选框添加
<label></label>，提升可访问性。? 备选：轻量级 JS 回退方案（兼容旧浏览器）
若需支持 Safari 15.3 或更低版本，可采用以下无副作用的 JS：
document.addEventListener('DOMContentLoaded', () => { const checkbox = document.getElementById('checkbox-id'); const targetDiv = document.getElementById('showDiv'); if (checkbox && targetDiv) { const toggleDiv = () => { targetDiv.style.display = checkbox.checked ? 'block' : 'none'; }; // 同时监听 change（推荐）和 click，避免移动端 focus 干扰 checkbox.addEventListener('change', toggleDiv); // 可选：防止某些场景下 change 未触发 checkbox.addEventListener('click', toggleDiv); } });? 提示：优先使用
change事件而非click，因其在用户真正修改状态（包括键盘操作）时触发，更符合语义。综上，纯 CSS 方案应作为首选——它消除 JS 状态管理复杂度，天然支持服务端渲染（SSR）与静态站点，且性能零开销。在现代项目中，大胆拥抱
:has()，让交互逻辑回归样式层。
