纯 CSS 无法在点击锚点链接（）时自动将远距离的 设为已勾选状态；必须借助 JavaScript 监听跳转行为并手动设置 checked = true，本文详解实现原理、最小化 JS 方案及关键注意事项。
纯 css 无法在点击锚点链接（``）时自动将远距离的 `` 设为已勾选状态；必须借助 javascript 监听跳转行为并手动设置 `checked = true`，本文详解实现原理、最小化 js 方案及关键注意事项。
在现代前端开发中，我们常利用 :checked 伪类配合相邻兄弟选择器（如 + 或 ~）实现无 JS 的折叠/高亮交互效果。例如以下 CSS 可在复选框被用户点击后，展开后续内容并改变背景色：
.toggle:checked + h3 + .collapsible-factuur-content {
background-color: pink;
max-height: 500px;
opacity: 1;
transition: all 0.3s ease;
}但需明确一个核心限制：CSS 无法响应锚点跳转（#details）事件，也无法跨 DOM 距离“反向控制”非关联表单控件的状态。即使 触发页面滚动到 id="details" 元素，该行为本身不触发任何 CSS 状态变更，更不会影响远处独立的 的 checked 属性。
✅ 正确的因果关系是：用户主动交互（点击 checkbox 或其关联 label）→ 浏览器更新 checked 状态 → CSS 伪类生效。
❌ 锚点跳转（href="#xxx"）仅触发 scrollIntoView 和 hashchange，它不是表单交互事件，无法被 CSS 捕获或响应。
因此，若系统允许极简 JS（仅用于状态同步），推荐采用轻量、无依赖的内联方案：
<a href="#details" onclick="document.getElementById('collapsible-details-historiek').checked = true">
Link to the anchor
</a>
<!-- 页面其他结构 -->
<div id="details">
<mark>The anchor</mark>
</div>
<input class="toggle" id="collapsible-details-historiek" type="checkbox" data-hj-masked="">
<h3>
<label class="gp-product" for="collapsible-details-historiek">
<i class="fas fa-history"></i>
<h4>Title of the item</h4>
</label>
</h3>
<div class="collapsible-factuur-content" id="details-algemeen">
Content of the item.
</div>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- onclick 中直接赋值 checked = true 比调用函数更简洁，避免额外作用域开销；
- 确保 id 值严格匹配（区分大小写、无空格），否则 getElementById() 返回 null；
- 若需支持多次点击切换（而非仅设为 true），可改用 input.checked = !input.checked；
- 若页面存在多个同类锚点，建议统一用 data-target 属性解耦，例如：
，再配合通用脚本处理。
? 总结：纯 CSS 无解，但一行内联 JS 即可可靠实现需求。在 JS 受限环境中，应优先评估是否真“完全禁用 JS”，还是仅禁止外部脚本或复杂框架——多数 CMS 或邮件模板系统仍允许安全的内联事件处理器。只要不破坏沙箱策略，此类微操作是合理且广泛兼容的实践方案。
