如何在HTML表格中添加单选框？INPUT标签实现数据选择-html教程-PHP中文网

单选框必须用相同name属性才能实现互斥选择，name值需完全一致且大小写敏感；每行独立选项组应使用不同name，value须具语义；默认选中应由html直接声明checked属性；js取值应按name精准定位而非遍历所有单选框。

如何在html表格中添加单选框？input标签实现数据选择

单选框必须用 `name` 统一才能互斥选择

HTML 表格里放单选框，最常犯的错是每个 <input type="radio"> 的 name 属性值不一致，结果所有框都能同时选中——这根本不是“单选”，只是多个独立开关。
真正实现单选，必须让同一组选项的 name 完全相同。比如表格每行代表一个用户，你想让用户从“启用/禁用”中二选一，那就给所有该列的单选框设成 name="status"。

常见错误现象：
• 点击一个，其他不取消
• 浏览器控制台没报错，但逻辑失效
• 表单提交后只拿到最后一个被点的值（其实是浏览器随机取了一个，因为 name 不统一导致分组失败）

name 值必须字符串完全一致，大小写敏感（status ≠ Status）
建议用语义化名称，如 name="user_role"、name="payment_method"
不要用动态生成的 ID 或索引当 name，比如 name="radio_1" 会直接破坏单选逻辑

表格中每行一个选项组，`value` 要有意义

如果表格是展示多条记录（如用户列表），而你想让每行各自独立选择（比如每行选“通过/拒绝”），那每行应是**独立的单选组**，即每行用不同的 name。这时 value 就特别关键：它不是随便填的，而是后端或 JS 读取时唯一依赖的数据标识。

使用场景举例：审批列表页，每行对应一个申请，两个单选框分别代表“同意”和“驳回”。用户只能二选一，提交时需知道“第3行选了驳回”。

给每行设置唯一 name，例如 name="decision_123"（123 是该行数据 ID）
两个单选框的 value 应为明确语义值，如 value="approve" 和 value="reject"，别用 "1"/"0" 这类无意义数字
务必加 id + label 关联，提升可访问性与点击区域（<label for="radio-approve-123">同意</label>）

用 `checked` 控制默认选中项，别靠 JS 模拟

初始化时哪一项该被选中，应该由 HTML 直接声明，而不是等页面加载完再用 JS click() 或设 checked = true。后者在表单重置、SSR、或某些框架（如 Vue 的 v-model 绑定前）下容易出竞态问题。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

错误做法：
<input type="radio" name="role" value="admin"> → 无默认，用户可能漏选
<script>document.querySelector('[value="admin"]').checked = true;</script> → 延迟生效、不可服务端渲染

服务端渲染或静态 HTML 中，直接写 checked 属性（无需 checked="checked"，布尔属性有即真）
如果数据来自接口，应在模板拼接阶段就判断并插入 checked，而不是 DOM 渲染后再操作
注意：同一 name 组内最多只能有一个 checked；若多个都写了，浏览器只认第一个

获取选中值时，别遍历所有 `input[type="radio"]`

很多人写 JS 取值时，习惯 document.querySelectorAll('input[type="radio"]') 然后循环判断 checked，这在表格行数多时效率低，且容易拿错组。正确方式是按 name 精准定位。

示例：想取 name="status" 这一组当前选中的 value：

const selected = document.querySelector('input[name="status"]:checked');
const value = selected ? selected.value : null;

性能与兼容性影响：
• querySelector 比 querySelectorAll + 循环快得多，尤其在百行表格中
• :checked 伪类 IE9+ 支持良好，不用额外 polyfill
• 如果用 jQuery，$('input[name="status"]:checked').val() 同样简洁