每行独立单选需每行name唯一（如name="row_1001"），全表单选则所有radio共用同一name（如name="selected_row"）；name应基于ID而非索引，value直接用数据ID，配合id与label确保可访问性，JS通过document.querySelector('input[name="..."]:checked')安全获取选中值。
表格每行独立单选，name必须按行唯一
想让表格每行可单独选中（比如点击某行触发编辑、删除），就不能所有单选框共用一个 name。否则点第5行会取消第1行——这违反“每行独立”的需求。
正确做法是：给每一行的单选框分配专属 name，例如 name="row_1001"、name="row_1002"。ID 或后端返回的主键是最稳妥的来源，避免用索引（如 row_0）——表格排序或分页后索引会错位。
- value 建议直接用数据 ID，比如
value="1001"，后续 JS 取值时不用再查 DOM 结构 - 不要省略
id和label配合，否则点击文字无法触发选择，可访问性差 - 若用框架（如 React/Vue），确保
name在重渲染时不重复或丢失，否则浏览器会重置选中状态
整表只允许选中一行，所有单选框共用同一 name
如果业务要求“全表只能选一项”（比如批量操作前指定基准行），那就必须让所有单选框的 name 完全一致，比如 name="selected_row"。大小写敏感，Selected_Row 和 selected_row 是两组。
常见错误是服务端模板循环生成时，误把动态变量拼进 name，导致每项 name 实际不同。检查渲染后的 HTML 源码，确认所有 <input type="radio"> 的 name 属性值字符串完全相同。
立即学习“前端免费学习笔记（深入）”；
- 默认选中项应由 HTML 直接带
checked属性，而不是靠 JS 后设——SSR 或初始加载快于 JS 执行时，后者会失效 - 提交表单时，只有被选中的那个
value会被发送，其余同名项不参与提交 - 用 CSS 隐藏原生样式时，别忘了保留
appearance: none后的焦点与可访问性支持
JS 获取当前选中行 value 的可靠写法
别遍历所有单选框再判断 checked，效率低且易漏。直接用 document.querySelector 按 name 精准定位：
const selected = document.querySelector('input[name="selected_row"]:checked');
const rowId = selected ? selected.value : null;
这个写法在无选中项时返回 null，安全；若 name 是动态生成的（如 row_${id}），就先拼出完整 name 字符串再查询。
- jQuery 用户可用
$('input[name="selected_row"]:checked').val()，但注意 jQuery 1.6+ 才正确支持:checked伪类 - 监听变更推荐用
change事件委托到 table 或 tbody，而非每个 input 单独绑定 - 不要依赖
click事件取值——空点击或键盘操作可能不触发 click，但一定触发 change
label 与 input 的关联方式影响点击区域和语义
两种合法写法效果相同，但结构稳定性不同：
显式关联（推荐用于表格）：<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>
- 表格中单元格（
td）内容常含其他标签或空格，隐式包裹容易因换行或多余空格破坏 DOM 结构，导致 label 无法正确关联 input - 显式写法明确绑定，方便调试和自动化测试定位
- 无论哪种，都必须保证
for值与id完全一致，且同一页面不重复
