直接修改 label 的 textcontent 即可，无需改动 name 和 value；单选按钮显示文字与 input 分离，value 仅用于提交，用户看到的文字在 label 中；框架中应通过响应式数据更新而非手动操作 dom。

直接改 <label></label> 或 textContent 就行，不用碰 name 和 value

单选按钮组的选项文字只是普通文本，和 <input type="radio"> 本身是分离的。真正起作用的是 value（提交时发给后端的值），而用户看到的文字在 <label></label> 里或紧跟在 <input> 后面。

常见错误是试图修改 input.value 来改显示文字——这只会让提交值变掉，界面上啥也不变。

• 如果用 <label for="id">文字</label> + <input id="id"> 结构：直接改 label.textContent
• 如果用 <label><input>文字</label> 包裹结构：改 label.childNodes 中的文本节点，或更稳妥地用 label.querySelector("input").nextSibling.nodeValue = "新文字"
• 批量更新时，建议统一用 for 属性绑定，再用 document.querySelector('label[for="xxx"]') 定位并修改

用 dataset 或 data- 属性管理多语言/动态文案更安全

硬编码文字在切换语言或运行时更新时容易漏改、错位。把文案抽到 data- 属性里，配合 JS 动态注入，能避免 DOM 结构误操作。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<input type="radio" name="theme" id="light" value="light"><label for="light" data-i18n="theme_light">Light</label>

• 修改时只操作 label.dataset.i18n 或用 i18n 工具替换 textContent
• 不依赖文本节点位置，不怕换行、空格、内联元素干扰
• 服务端渲染时也能预置不同语言的 data- 值，前端只做映射

注意 innerHTML 的 XSS 风险，优先用 textContent

如果新文案来自用户输入、URL 参数或 API 返回，直接赋值给 innerHTML 可能执行脚本。哪怕只是改单选文字，也得防着。

• 永远优先用 el.textContent = newText，它自动转义 HTML 字符
• 只有确认内容绝对可信（如配置常量）且需保留简单格式（如 <strong></strong>）时，才用 innerHTML
• 别写 label.innerHTML = "<span>" + userText + "</span>" —— 这等于开后门

Vue/React 等框架里别手动改 DOM，走响应式更新

在框架项目中硬查 document.querySelector 并改 textContent，会绕过响应式系统，导致状态不一致、下次 re-render 被覆盖。

• Vue：把选项文案存在 data 或 computed，用 v-for 渲染，改数据即可
• React：用 useState 存选项数组，map() 渲染，调 setState 更新
• 强行 DOM 操作还可能破坏框架对 input 的受控处理，引发 checked 状态错乱

改单选按钮文字本质是改标签文本，不是改表单逻辑。最易忽略的是框架场景下仍沿用原生思路去操作 DOM，结果改了又回滚，或者漏更新关联状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！