### [HTML表格行选择：单选框的两种 name 写法](https://www.huociguo.com/article/1453)
**Published:** 2026-09-27T04:12:48
**Author:** 米了
**Excerpt:** 表格里的单选框，成败全在 。每行独立单选 → 按行唯一，如 ；整表只选一项 → 所有 共用一个 ，如 。表格里…
表格里的单选框，成败全在 `name`。
每行独立单选 → `name` 按行唯一，如 `name="row_1001"`；
整表只选一项 → 所有 `radio` 共用一个 `name`，如 `name="selected_row"`。
表格里的单选框选不对，问题从来不在 JS，而在 name 写成了同一个还是不同的。
## 每行独立单选：name 必须按行唯一
表格每行需要被独立点选时（点击某行触发编辑、删除），所有单选框不能共用一个 `name`。共用的后果是点第 5 行会取消第 1 行，与“每行独立”的诉求完全相反。
正确做法是给每一行的单选框分配专属 `name`：
```
```
- `name` 取自后端返回的主键或 ID，不用数组索引。表格排序、分页之后索引会错位。
- `value` 直接写数据 ID，如 `value="1001"`，后续取值不必再回查 DOM 结构。
- `id` 与 `label` 配套不能省。省略后点击文字无法触发选择，可访问性也会下降。
- 使用 React、Vue 等框架时，`name` 在重渲染后要保持稳定，重复或丢失会重置选中状态。
`label` 两种写法效果相同，结构稳定性不同。表格场景推荐显式关联，隐式包裹在嵌套结构里更容易误触：
```
```
## 整表只选一项：所有单选框共用同一 name
业务要求全表只能选一项时（批量操作前指定基准行），所有单选框的 `name` 必须完全一致：
```
```
- 默认选中项由 HTML 直接带 `checked` 属性，不靠 JS 事后设置。SSR 或首屏渲染快于脚本执行时，后者会失效。
- 提交表单时，只有被选中那一项的 `value` 会被发送，其余同名项不参与提交。
- 用 CSS 隐藏原生样式后，`appearance: none` 会一并抹掉焦点指示，需补回焦点与可访问性支持。
## 获取当前选中行的 value
不要遍历所有单选框再判断 `checked`，效率低且易漏。按 `name` 精准定位即可：
```
const selected = document.querySelector('input[name="selected_row"]:checked');
const rowId = selected ? selected.value : null;
```
未选中任何项时返回 `null`，该 `name` 也不会出现在提交数据中，后端需处理空值。
**Categories:** HTML5
---