radio 的值必须显式设置 value 属性，如 "zh"、"en"；innerText 或 innerHTML 不参与表单提交，多语言文案应通过 data-* 属性或 i18n 字典管理。
radio value 不能直接用 innerText 或 innerHTML 当值用
多语言页面里常有人把 <label></label> 文本当作 radio 的值，比如显示“中文”“English”却没设 value，结果提交时拿到空字符串或 undefined。浏览器只认 value 属性，innerText 只是给用户看的，跟表单数据完全无关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
<input type="radio">必须显式设置value，且值应为语言中立的标识符（如"zh"、"en"），不要用"中文"或"English" - 多语言文案通过
data-*属性或外部 i18n 字典管理，例如：<input type="radio" name="lang" value="zh" data-i18n-label="lang_zh"><label>${t('lang_zh')}</label> - 如果服务端返回的是语言名字符串（如
"Spanish"），前端必须映射成标准 code（如"es"）再赋给value，否则后续判断和存储会混乱
用 JavaScript 获取选中的 radio 值时别漏掉 checked 判断
常见错误是直接取 document.querySelectorAll('input[name="lang"]') 然后遍历读 value，但没检查 checked，导致拿到所有选项的值，而非当前选中项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
document.querySelector('input[name="lang"]:checked')，它天然只返回已选中的那个节点，查不到就返回null - 取值写法要带空值防护：
const selected = document.querySelector('input[name="lang"]:checked'); const lang = selected ? selected.value : 'en'; - 监听变更时用
change事件而非click，因为键盘操作（空格键切换）也会触发change，更健壮
国际化切换时 radio 选中状态不同步的修复方法
页面语言切换后，UI 文案更新了，但 checked 状态可能还留在旧语言对应的 radio 上——尤其当新语言下选项顺序变化或部分选项被隐藏/新增时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 语言切换后，先根据当前语言环境下的有效
value列表做一次校验，例如当前支持["zh", "en", "ja"]，而之前选中的是"ko"，就要主动重置为默认项 - 不要依赖 DOM 顺序来推断选中逻辑；每次 i18n 更新后，调用统一函数恢复选中态：
setRadioSelection('lang', savedLangCode || 'en'); - 保存用户选择时，存的是
value（如"zh"），不是 label 文本或 DOM 索引，避免语言包更新后索引错位
React/Vue 等框架中绑定 radio 的常见陷阱
在受控组件里，value 和 checked 都由 state 驱动，但容易忽略：radio 组必须共用同一个 name，且每个 input 的 value 必须唯一，否则无法正确响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- React 中不要用
defaultChecked混合受控/非受控模式，统一用checked={value === item.value}+onChange更新 state - Vue 中避免直接用
v-model绑定到字符串变量，而应确保初始值与某个value匹配，否则首次渲染所有 radio 都不选中 - SSR 场景下，服务端渲染的
value必须与客户端初始化 state 一致，否则 hydration 时 React 会警告并丢弃选中态
多语言 radio 最容易出问题的地方不在文案翻译，而在 value 标识的生命周期管理——从初始渲染、用户选择、语言切换到表单提交，每个环节都依赖这个看似简单的字符串是否稳定、可预测、可追溯。
