HTML表格行选择：单选框的两种 name 写法

表格里的单选框，成败全在 name。
每行独立单选 → name 按行唯一，如 name="row_1001"；
整表只选一项 → 所有 radio 共用一个 name，如 name="selected_row"。

每行独立单选：name 必须按行唯一

表格每行需要被独立点选时（点击某行触发编辑、删除），所有单选框不能共用一个 name。共用的后果是点第 5 行会取消第 1 行，与“每行独立”的诉求完全相反。

正确做法是给每一行的单选框分配专属 name：

<input type="radio" id="sel-1001" name="row_1001" value="1001">
<input type="radio" id="sel-1002" name="row_1002" value="1002">

• name 取自后端返回的主键或 ID，不用数组索引。表格排序、分页之后索引会错位。

• value 直接写数据 ID，如 value="1001"，后续取值不必再回查 DOM 结构。

• id 与 label 配套不能省。省略后点击文字无法触发选择，可访问性也会下降。

• 使用 React、Vue 等框架时，name 在重渲染后要保持稳定，重复或丢失会重置选中状态。

label 两种写法效果相同，结构稳定性不同。表格场景推荐显式关联，隐式包裹在嵌套结构里更容易误触：

<!-- 显式关联：推荐用于表格 -->
<input type="radio" id="sel-1001" name="row_1001" value="1001">
<label for="sel-1001">选中此行</label>

<!-- 隐式包裹：简洁但易出错 -->
<label><input type="radio" name="row_1001" value="1001">选中此行</label>

整表只选一项：所有单选框共用同一 name

业务要求全表只能选一项时（批量操作前指定基准行），所有单选框的 name 必须完全一致：

<input type="radio" name="selected_row" value="1001">
<input type="radio" name="selected_row" value="1002" checked>

• 默认选中项由 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 也不会出现在提交数据中，后端需处理空值。