本文介绍在 HTML 表单中基于数据库返回的动态值（如 100000000/100000001）自动选中对应单选按钮的方法，适用于 PDF 导出前的只读表单渲染场景。
本文介绍在 html 表单中基于数据库返回的动态值（如 `100000000`/`100000001`）自动选中对应单选按钮的方法，适用于 pdf 导出前的只读表单渲染场景。
在构建需与后端数据绑定的静态表单（尤其是用于生成 PDF 的只读视图）时，不能依赖 JavaScript 交互，而应通过服务端逻辑或纯 HTML 属性直接控制单选按钮（<input type="radio">）的默认选中状态。核心原则是：每个选项组必须拥有唯一且一致的 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必须全局唯一。若需关联标签，使用<label for="unique-id"></label>+<input id="unique-id">；但对只读 PDF 表单，<label></label>包裹输入框（如上例）更简洁可靠。 -
避免混用单选与复选逻辑：原答案中提到的 checkbox 方案适用于「多选」场景（如“喜欢哪些颜色”），但本例明确为二元判断（Yes/No），务必使用
radio并分组。 -
服务端渲染建议：在 PHP / Jinja2 / Thymeleaf 等模板中，根据数据库字段动态插入
checked：<!-- Jinja2 示例 --> <input type="radio" name="OptionChosenRed" value="100000000" {% if db.red == '100000000' %}checked{% endif %} /> <input type="radio" name="OptionChosenRed" value="100000001" {% if db.red == '100000001' %}checked{% endif %} /> -
PDF 兼容性提示：主流 HTML→PDF 工具（如 wkhtmltopdf、WeasyPrint）均支持原生
checked属性渲染，无需额外样式干预。
✅ 总结
动态预设单选按钮的本质是将业务数据映射为 HTML 属性：用 name 划分逻辑域，用 value 对齐数据编码，用 checked 声明当前状态。只要结构规范、属性准确，即可零 JS 实现高保真、可打印、易维护的表单输出。
