单选按钮的 value 属性是提交时发送的实际值，必须为字符串且同组 name 相同；label 文本与 value 解耦；JS 获取需用 :checked 伪类，监听用 change 事件。
单选按钮的 value 属性就是数值
HTML 单选按钮（<input type="radio">）本身不“显示”数值，但每个选项必须通过 value 属性设置提交时实际发送的值。浏览器只把被选中项的 value 发给后端，和用户看到的文本无关。
常见错误是以为要靠 data-value 或 JS 变量存值——没必要，value 就是标准且唯一该用的地方。
-
value必须是字符串，但可填数字字面量（如"1"、"42"），后端解析时转成整型即可 - 同一组单选按钮必须有相同的
name，否则无法互斥 - 不要用
id或name当数值用——它们是标识符，不是数据值
怎么让 label 文本和 value 分开写
用户看到的是 <label> 里的文字，而提交的是 input 的 value。两者完全解耦，这是设计初衷。
<label> <input type="radio" name="level" value="1"> 入门 </label> <label> <input type="radio" name="level" value="2"> 进阶 </label> <label> <input type="radio" name="level" value="3"> 专家 </label>
表单提交时，如果选中“进阶”，实际发送的是 level=2。注意：这里 value="2" 是字符串，不是数字类型，JS 中用 parseInt(form.level.value) 转换才安全。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 读取选中的 value 值
不能直接用 document.querySelector('input[name="level"]')，因为这只会拿到第一个 input，不管它是否被选中。得加 :checked 伪类筛选。
- 获取当前选中的 value：
document.querySelector('input[name="level"]:checked')?.value（空值安全写法） - 没选中时返回
null，所以建议先判空再用，避免Cannot read property 'value' of null - 监听变化用
change事件，不是click（后者在已选中状态下再点不会触发）
容易忽略的兼容性和语义问题
value 看似简单，但几个细节常导致后端收不到值或前端逻辑错乱：
- 所有
radio没设value？那提交时一律是"on"（浏览器默认值），非常隐蔽 - 前后端约定的 value 值不一致（比如前端写
"true"/"false"，后端期待1/0） - 动态生成 radio 时漏写
name，导致它们不属于同一组，无法互斥 - 用 CSS 隐藏原生
input但没同步控制:checked状态，JS 读取失效
value 不是装饰字段，它是表单数据流里真实参与传输的关键载荷——写错一个引号，后端就可能收到空字符串或默认 "on"。
