无需 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> 内部：
? 关键说明：
: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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>），+选择器将失效，此时应改用~（后续兄弟选择器）并确保结构可控。- 无障碍友好：建议为复选框添加
<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()，让交互逻辑回归样式层。
