单选按钮必须name属性一致且用label包裹；value应为唯一标识如地址id；默认选中由后端控制，js设置需直接操作checked属性。
单选按钮 name 属性必须完全一致
浏览器靠 name 属性识别一组单选按钮（<input type="radio">）是否互斥。如果每个地址项的 name 值不同，比如写成 name="addr1"、name="addr2"，那它们根本不会联动，用户能同时勾选多个——这不是“单选”，是“多选失效”。
正确做法是所有地址项共用一个语义清晰的 name，例如：name="shipping_address"。
- 不要用动态生成的随机名或带索引的名（如
name="addr_0"） - 避免和表单其他字段重名（比如别和收货人姓名的
name="name"冲突） - 服务端接收时，也只认这个
name对应的单个值，不是数组
每个 radio 必须有唯一且有意义的 value
value 是提交给后端的真实数据，不是显示文字。用户看到的是 <label></label> 里的内容，而你提交的只能是 value 字符串。
常见错误是把地址全量字符串塞进 value，导致后端解析困难；或者用无意义的数字（如 value="1"），让后端无法对应到具体地址记录。
- 推荐用数据库中的地址 ID，例如：
value="addrid_8274" - 如果不用 ID，至少保证
value可被后端无歧义映射，比如value="home"、value="office" - 绝对不要留空
value=""，否则提交时该字段可能丢失或为 null
用 label 包裹 radio 实现点击区域扩大
纯靠点击小圆圈选中地址体验极差。必须把 <input type="radio"> 和描述文字一起包进 <label></label>，才能点文字、点整行都生效。
错误写法：<input type="radio" name="shipping_address" value="addrid_8274"><span>北京市朝阳区…</span>（点击文字无效）
正确结构：
<label> <input type="radio" name="shipping_address" value="addrid_8274"> 北京市朝阳区建国路8号院1号楼A座1001 </label>
- 不要依赖
for/id关联方式，容易漏写或写错，包裹式最稳 - 可加 CSS 选中态样式（如背景高亮），但前提是
input在label内部，否则 :checked + 后续兄弟选择器会失效
默认选中与初始状态控制
页面加载时没默认选项，用户可能漏选；但硬写 checked 又容易和后端返回的实际默认地址不一致。
稳妥做法是：由后端渲染时决定哪个 radio 加 checked 属性，前端不主动干预。若需 JS 动态设置（比如编辑页回显），必须用 document.querySelector('[value="addrid_8274"]').checked = true，而不是操作 class 或自定义属性。
- 不要用
setAttribute('checked', 'true')，它不触发表单状态更新 - JS 设置后记得检查
form.checkValidity()（如果用了required） - 移动端注意：iOS Safari 对未 visible 的 radio 的
checked状态读取偶尔有延迟，建议设置后稍作setTimeout再取值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
