无需 javascript，利用 css 的 :has() 伪类与兄弟选择器，即可优雅实现复选框勾选时显示、取消勾选时隐藏目标 div，兼容现代浏览器（chrome 105+、firefox 121+、safari 15.4+），语义清晰且无事件绑定干扰。
无需 javascript，利用 css 的 :has() 伪类与兄弟选择器，即可优雅实现复选框勾选时显示、取消勾选时隐藏目标 div，兼容现代浏览器（chrome 105+、firefox 121+、safari 15.4+），语义清晰且无事件绑定干扰。
在构建产品筛选器等交互组件时，常需通过复选框（<input type="checkbox">）控制关联内容区域（如筛选条件面板）的显隐状态。传统做法依赖 addEventListener('click') 监听并手动切换 display 样式，但易受页面重载、事件重复绑定、框架生命周期（如 React/Vue 中动态渲染）影响——正如提问者所遇：勾选可显示，取消却无法隐藏，且 onclick 属性不可用。
现代 CSS 提供了更简洁、声明式、零 JS 的解决方案：
✅ 利用 :has() 伪类检测复选框是否被勾选；
✅ 结合相邻兄弟选择器（+）精准定位紧随其后的 <div>；<br>
✅ 通过 <code>form 包裹复选框并添加 class（如 showhide），确保结构语义化且选择器可控。
✅ 推荐实现（纯 CSS）
#showDiv {
width: 100%;
background-color: #252525;
color: #ffffff;
padding: 16px;
margin-top: 8px;
border-radius: 4px;
}
/* 默认隐藏：form 含任意 checkbox 时，其后紧跟的 #showDiv 隐藏 */
form.showhide:has(input[type="checkbox"])+div#showDiv {
display: none;
}
/* 勾选时显示：form 内 checkbox 被勾选，则后续 #showDiv 显示 */
form.showhide:has(input[type="checkbox"]:checked)+div#showDiv {
display: block;
}
? 关键说明：
:has()允许父容器“感知”子元素状态，而+确保只影响紧邻的下一个兄弟元素（即<div id="showDiv">），避免误触其他同级元素。<h3>⚠️ 注意事项与兼容性</h3> <ul> <li> <strong>浏览器支持</strong>：<code>:has()已获主流浏览器广泛支持（Chrome ≥105, Edge ≥105, Firefox ≥121, Safari ≥15.4）。若需支持旧版浏览器（如 IE 或早期 Chrome），仍需回退至 JavaScript 方案（见下文备选）；DOM 结构要求： <form></form>与<div> 必须为<strong>同级兄弟元素</strong>，且 <code><div> 必须<strong>紧接在 <code><form></form>之后（+是相邻兄弟选择器，非通用兄弟~）；无障碍友好：建议为复选框添加 <label></label>，提升可访问性；性能提示： :has()在复杂 DOM 中可能触发重排，但对单个筛选控件无实际影响。? 备选：稳健的 JavaScript 方案（兼容所有浏览器）
若需向下兼容，推荐使用
change事件（比click更准确，避免因 focus/label 点击导致逻辑错乱）：const checkbox = document.getElementById('filter-toggle'); const targetDiv = document.getElementById('showDiv'); if (checkbox && targetDiv) { checkbox.addEventListener('change', () => { targetDiv.style.display = checkbox.checked ? 'block' : 'none'; }); }✅ 使用
change而非click可正确响应所有勾选方式（鼠标点击、空格键、屏幕阅读器操作等）。综上，优先采用纯 CSS
:has()方案——代码更轻量、无执行时机风险、天然防重复绑定，是现代前端实现 Show/Hide 交互的理想实践。
