HTML单选框怎么实现跨表单提交-html教程-PHP中文网

HTML单选框跨form失效是因为浏览器要求相同name的radio必须在同一form内才能互斥；跨form时逻辑隔离，需JS手动同步或合并到同一form提交。

html单选框怎么实现跨表单提交

HTML单选框本身不能跨

提交——浏览器原生机制只允许每个独立提交其内部控件，name 相同但分属不同表单的互不感知，也不会互斥。

为什么单选框跨 form 会失效

单选框的“单选”行为依赖两个前提：相同 name 属性 + 同一表单作用域（即 DOM 中位于同一个

元素内）。一旦拆到不同，它们就变成逻辑隔离的独立控件组，即使 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"），但**不要放在同一个里**
监听所有相关 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; });
  });
});