本文介绍在 HTML 表单中基于数据库返回的动态值（如 100000000/100000001）自动选中对应单选按钮的方法，适用于 PDF 导出前的只读表单渲染场景。

本文介绍在 html 表单中基于数据库返回的动态值（如 `100000000`/`100000001`）自动选中对应单选按钮的方法，适用于 pdf 导出前的只读表单渲染场景。

在构建需与后端数据绑定的静态表单（尤其是用于生成 PDF 的只读视图）时，不能依赖 JavaScript 交互，而应通过服务端逻辑或纯 HTML 属性直接控制单选按钮（）的默认选中状态。核心原则是：每个选项组必须拥有唯一且一致的 name，并通过 value 匹配数据库中的标识符，再使用 checked 属性显式指定预选项。

✅ 正确的结构设计

首先，避免多个单选按钮共用相同 id（如原文中两个 id="100000000"），这违反 HTML 唯一性规范，也阻碍准确控制。同时，不同逻辑问题（如“喜欢红色”和“喜欢绿色”）必须使用不同的 name 属性，否则用户只能在全部选项中单选一个，造成语义错误。

推荐结构如下（语义清晰、可扩展、便于服务端解析）：

<p>
  I like red:
  <label><input type="radio" name="OptionChosenRed" value="100000000" checked> Yes</label>
  <label><input type="radio" name="OptionChosenRed" value="100000001"> No</label>
</p>

<p>
  I love green:
  <label><input type="radio" name="OptionChosenGreen" value="100000000"> Yes</label>
  <label><input type="radio" name="OptionChosenGreen" value="100000001" checked> No</label>
</p>

? 关键点：

• name="OptionChosenRed" 和 name="OptionChosenGreen" 确保两组互不干扰；
• value="100000000" 对应数据库中表示 “Yes” 的编码，100000001 表示 “No”；
• checked 属性直接写入 HTML 标签，无需 JS 即可实现服务端驱动的默认选中（例如模板引擎中根据数据 if answer_red == '100000000' 插入 checked）。

⚠️ 注意事项与最佳实践

• 不要复用 id：每个 id 必须全局唯一。若需关联标签，使用 + ；但对只读 PDF 表单， 包裹输入框（如上例）更简洁可靠。
• 避免混用单选与复选逻辑：原答案中提到的 checkbox 方案适用于「多选」场景（如“喜欢哪些颜色”），但本例明确为二元判断（Yes/No），务必使用 radio 并分组。
• 服务端渲染建议：在 PHP / Jinja2 / Thymeleaf 等模板中，根据数据库字段动态插入 checked：

  <!-- Jinja2 示例 -->
  <input type="radio" name="OptionChosenRed" value="100000000" if db.red="=" endif><input type="radio" name="OptionChosenRed" value="100000001" if db.red="=" endif>

• PDF 兼容性提示：主流 HTML→PDF 工具（如 wkhtmltopdf、WeasyPrint）均支持原生 checked 属性渲染，无需额外样式干预。

✅ 总结

动态预设单选按钮的本质是将业务数据映射为 HTML 属性：用 name 划分逻辑域，用 value 对齐数据编码，用 checked 声明当前状态。只要结构规范、属性准确，即可零 JS 实现高保真、可打印、易维护的表单输出。