radio的value重复会导致后端无法区分选中项，因表单提交只传name=value且value相同，失去用户选择上下文；name必须相同以分组，value必须唯一以标识选项。
同一个name下radio的value重复会导致后端无法区分选中项
浏览器允许你写两个value="yes"的<input type="radio">，但它不会报错——问题出在语义和逻辑层面：当用户点击其中任意一个，表单提交时后端收到的永远是name="xxx" → value="yes"，根本不知道用户点的是第几个。这不是浏览器限制，而是设计逻辑失效。
常见错误场景：
- 复制粘贴生成选项时没改
value，比如都留着value="1" - 用循环渲染但变量未正确绑定，导致所有项
value取到同一初始值 - 误把
id或显示文案直接当value用，而文案本身可能重复（如“启用”“开启”都映射到相同字符串）
value重复时JS读取会返回错误的首个匹配项
执行document.querySelector('input[name="status"]:checked')时，如果多个value相同且都被设为checked（虽然HTML只认第一个），JS仍只会返回 DOM 中第一个匹配的元素——但它的value和其他重复项一样，无法反推用户真实意图。
更麻烦的是动态操作：
-
el.checked = true设为选中后，document.querySelector(...:checked)仍可能返回错误节点（取决于插入顺序） - 用
Array.from(document.querySelectorAll('input[name="x"]'))遍历判断checked，结果里多个value相同，你得靠index或dataset额外标记才能区分，徒增复杂度
服务端接收时value重复等于丢数据
HTTP 表单提交只传一对name=value，即使前端有十个value="on"的 radio，后端request.form.get("switch")拿到的永远只是"on"——没有上下文、没有索引、无法溯源。你没法知道用户是在第3行表格里点了“启用”，还是在第5个配置区块里点了同名开关。
实际影响包括：
- Django/Flask 等框架里
form.switch.data恒为固定字符串，无法做字段级校验 - 前后端约定失效：比如约定
value="auto-1"表示第一组自动模式，value="auto-2"表示第二组，重复就全乱套 - 数据库写入时主键冲突或逻辑覆盖（尤其用
value当枚举键时）
真正该复用的是name，不是value
name必须相同才能构成一组互斥控件，这是强制要求；而value必须不同，这是业务要求。二者分工明确：name管分组，value管标识。
实操建议：
- 静态 HTML 中，手写时逐个核对
value是否唯一且语义清晰，比如value="light"/value="dark"，别用value="1"/value="2" - 模板引擎（Jinja2/Twig）中，确保循环变量注入到
value属性，例如value="{{ opt.key }}"而非value="static" - 用 JS 动态生成时，别用
for (let i = 0; i 却把<code>i直接塞进value——除非你真需要数字索引，否则优先用有意义的键名
value 重复看起来是小疏忽，但它让单选按钮退化成“伪单选”：界面上能点，逻辑上不可靠，后端收不到有效信息。关键不是浏览器拦不拦，而是你愿不愿意让这个 value 承担起唯一标识的责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
