HTML单选框跨form失效是因为浏览器要求相同name的radio必须在同一form内才能互斥；跨form时逻辑隔离，需JS手动同步或合并到同一form提交。
HTML单选框本身不能跨 <form></form> 提交——浏览器原生机制只允许每个 <form></form> 独立提交其内部控件，name 相同但分属不同表单的 <input type="radio"> 互不感知，也不会互斥。
为什么单选框跨 form 会失效
单选框的“单选”行为依赖两个前提：相同 name 属性 + 同一表单作用域（即 DOM 中位于同一个 <form></form> 元素内）。一旦拆到不同 <form></form>，它们就变成逻辑隔离的独立控件组，即使 name 一样，也完全不联动。
- 点击 A 表单里的
radio，B 表单里同名的不会自动取消勾选 - 提交 A 表单时，只发送 A 内部被选中的值；B 表单提交时另算，彼此无关联
- JavaScript 查询
document.querySelectorAll('input[name="theme"]')能拿到全部，但浏览器不负责跨 form 同步状态
替代方案：用 JavaScript 手动同步状态
如果 UI 上必须视觉分离（比如选项分布在页面不同区域），但语义上属于同一逻辑项（如“主题色”），就得靠 JS 主动维护一致性：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 给所有同逻辑的单选框统一
name（如name="theme"），但**不要放在同一个<form></form>里** - 监听所有相关
radio的change事件 - 触发时，遍历所有同名
radio，把非当前项设为checked = false - 注意：避免重复触发（可用
event.target.checked === true过滤）
document.querySelectorAll('input[type="radio"][name="theme"]').forEach(radio => {
radio.addEventListener('change', function() {
if (!this.checked) return;
document.querySelectorAll('input[type="radio"][name="theme"]')
.forEach(r => { if (r !== this) r.checked = false; });
});
});更稳妥的做法：合并表单或改用隐藏字段
跨 form 提交本质是设计矛盾。真正要解决的是“数据归属”问题，而不是强行突破 HTML 限制：
立即学习“前端免费学习笔记（深入）”；
- 如果多个区块最终要一起提交，**把它们包进同一个
<form></form>** 是最简单、无障碍、无需 JS 的方案 - 如果某些区块需独立提交（如搜索框+筛选区），但又要共享一个配置项，可让主表单用
<input type="hidden" name="theme">存储当前值，并在用户切换单选框时用 JS 更新该隐藏字段 - 避免用
disabled或display: none隐藏跨 form 单选框——它们仍会参与表单序列化，可能造成脏数据
容易忽略的关键点
即便用 JS 同步了视觉和状态，提交时仍要面对实际表单边界：
- 没有哪个
<form></form>会自动包含其他表单里的单选框值；你得手动收集并拼进 FormData 或 fetch body - 服务端接收时，不能假设
theme一定来自某一个固定表单的 POST 字段，得检查所有可能来源（或统一由前端聚合后发一次请求） - 屏幕阅读器对跨 form 关联缺乏语义支持，
<label></label>的for也只能指向同 document 中的 id，无法跨 form 建立逻辑组
