本文探讨在禁用 javascript 的受限环境中，能否仅用 css 实现“点击锚点链接即自动勾选指定复选框”的交互效果，并明确结论：该行为不可行；同时提供兼容性可靠、语义清晰的轻量级 js 替代方案及最佳实践建议。
本文探讨在禁用 javascript 的受限环境中，能否仅用 css 实现“点击锚点链接即自动勾选指定复选框”的交互效果，并明确结论：该行为不可行；同时提供兼容性可靠、语义清晰的轻量级 js 替代方案及最佳实践建议。
在现代前端开发中，我们常借助 配合相邻兄弟选择器（如 :checked + .collapsible-factuur-content）实现无 JS 的折叠/高亮等交互效果。但一个常见误区是：认为点击普通 锚点链接能间接触发目标关联的 checkbox 的 :checked 状态。
事实是：纯 CSS 无法监听或响应锚点跳转事件，也无法跨元素“激活”表单控件的状态。CSS 是声明式语言，仅能响应用户对可交互元素本身（如 :hover, :focus, :checked）的直接操作。锚点链接 和 之间不存在 CSS 可感知的逻辑绑定关系——即使它们在 DOM 中位置邻近或语义相关，CSS 选择器（包括 ~, +, :has() 等）均无法基于 href="#id" 跳转动作去改变另一个独立元素的 checked 属性。
例如，以下 CSS 规则永远无法被锚点点击激活：
/* ❌ 无效：此规则不会因点击 <a href="#details"> 而生效 */
a[href="#details"]:active ~ .toggle {
/* 无 effect — :active 仅作用于 <a> 自身，且不持久 */
}
/* ❌ 无效：CSS 无法监听 URL hash 变化 */
:target ~ .toggle {
/* :target 指向 #details 元素，但无法向上/跨级影响 input */
}因此，要实现“点击链接 → 勾选 checkbox → 触发后续样式变化（如 .collapsible-factuur-content 显示/变色）”，必须引入 JavaScript。但好消息是：所需代码极简、零依赖、完全符合语义化与可访问性要求。
立即学习“前端免费学习笔记（深入）”；
✅ 推荐实现（轻量、安全、向后兼容）：
<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"
aria-hidden="true" <!-- 若非表单关键字段，可隐藏辅助技术 -->
>
<h3>
<label class="gp-product" for="collapsible-details-historiek">
<i class="fas fa-history" aria-hidden="true"></i>
<h4>Title of the item</h4>
</label>
</h3>
<div class="collapsible-factuur-content" id="details-algemeen">
Content of the item.
</div>⚠️ 注意事项：
- onclick 内联处理是受限环境下的务实选择，若系统允许外部脚本，建议提取为独立函数以利维护；
- aria-hidden="true" 可避免屏幕阅读器重复播报非交互性 checkbox（因其状态由链接控制）；
- 确保
- 此方案兼容所有现代浏览器及 IE11+，无 polyfill 需求。
? 总结：CSS 擅长描述状态样式，而状态变更需由用户直接操作或 JS 驱动。当业务逻辑要求“跨元素触发状态”时，JavaScript 不是妥协，而是精准解耦的必然选择。在 JS 受限场景下，应优先评估是否真能彻底禁用——哪怕仅允许一行内联脚本，也足以解锁强大交互能力。
