实现“设为默认地址”开关需三步：1. HTML用同name的checkbox实现单选语义；2. JS监听change事件确保仅一个被选中，并同步隐藏域default_id；3. 后端保存时设对应地址is_default=true、其余为false，且页面回显checked属性。
实现收货地址表单中“设为默认地址”的开关切换，核心是用一个可交互的开关控件（如 checkbox 或自定义 toggle）来标记当前地址是否为默认，并确保同一用户下最多只有一个默认地址。下面分三部分说明关键实现方式：
1. HTML 结构：用 checkbox 实现开关语义
推荐使用原生 checkbox，语义清晰、无障碍友好、无需额外 JS 就能响应状态变化：
<div class="address-item" data-id="123">
<label>
<input type="checkbox" name="default_address" value="123">
设为默认地址
</label>
<div class="address-content">
张三｜138****1234｜北京市朝阳区xxx小区5栋101</div>
</div>
注意：所有地址项的 name 保持一致（如 name="default_address"），浏览器会自动实现单选互斥（前提是没加 multiple 属性），但需配合 JS 确保「只能有一个被选中」。
2. JavaScript 控制：单选逻辑 + 提交同步
监听 checkbox 变化，取消其他地址的勾选，并更新数据模型或隐藏字段：
立即学习“前端免费学习笔记（深入）”；
- 给每个 checkbox 绑定 change 事件
- 当某个被勾选时，遍历同 name 的所有 checkbox，把其他都设为 checked = false
- 同时把该地址 ID 写入一个隐藏域（如
<input type="hidden" name="default_id" value="">），便于后端接收 - 可选：添加视觉反馈（如高亮当前默认项、禁用其他开关）提升体验
3. 后端配合：保存与回显
前端开关只是交互层，真正生效依赖后端逻辑：
- 提交时，后端收到
default_id，将对应地址的is_default = true，其余同用户地址设为false - 页面加载时，后端应在每个地址项中输出
checked属性（如checked="checked"），让默认地址开关初始为开启状态 - 避免仅靠前端 JS 判断默认状态，防止绕过校验
