HTML中多个不同组的radio单选框怎么分别取值-html教程-PHP中文网

radio单选框靠name属性分组，同name值互斥，不同name值独立；ID和class不影响分组。JavaScript需用document.querySelector('input[name="xxx"]:checked')?.value获取选中值，动态生成时须确保每组name唯一。

html中多个不同组的radio单选框怎么分别取值

radio单选框靠`name`分组，不是靠ID或class

HTML里的分组逻辑非常简单：只要name属性值相同，就属于同一组，互斥选择；不同name值就是不同组，彼此完全独立。很多人误以为用id或class能控制分组，结果发现选了A组的选项，B组也自动取消了——那基本是两组radio意外用了同一个name。

实操要点：

name必须是合法的字符串（建议只用字母、数字、下划线），避免空格或特殊符号
同一组内每个radio的value要不同，否则提交后无法区分选中了哪个
不要给不同组的radio设相同的name，哪怕只是拼写差一个字母（比如gender和gander）

JavaScript里用`document.querySelector`按name取当前选中值

想分别获取每组的选中值，不能用document.getElementById——因为radio通常没有ID，或者ID不参与分组逻辑。正确方式是用name属性定位，再找其中被勾选的那个：

const gender = document.querySelector('input[name="gender"]:checked')?.value;
const level = document.querySelector('input[name="level"]:checked')?.value;

注意几点：

:checked伪类必须写在input[name="xxx"]后面，顺序不能反
加?.value是为了防止没选中时返回null导致报错Cannot read property 'value' of null
如果某组完全没选中，结果就是undefined，业务代码里得自己判断是否允许空值

表单提交时，只有`name`和`value`生效，其他属性全忽略

当用

直接提交（或FormData收集），后端收到的只是name=value键值对。例如：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<input type="radio" name="theme" value="dark"><input type="radio" name="theme" value="light">

用户选中light，提交后端就只收到theme=light。以下这些都不会进提交数据：

id="theme-light"
class="option"
data-desc="浅色模式"
有没有checked属性（只影响初始状态，不参与提交）

容易被忽略的坑：动态生成radio时`name`拼错或没同步更新

用JS动态添加radio（比如从API拉配置渲染选项），最容易出问题的是name写死或变量引用错误。例如：

items.forEach((item, i) => {
  const radio = document.createElement('input');
  radio.type = 'radio';
  radio.name = 'category'; // ← 这里写成固定字符串，但本意是每组不同
  radio.value = item.id;
});

结果所有动态生成的radio都挤进同一组，互相干扰。正确做法是确保每组有唯一name，比如：