实现“设为默认地址”开关需三步：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 确保「只能有一个被选中」。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

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 判断默认状态，防止绕过校验

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