如何基于数据库动态值设置HTML单选按钮默认选中状态

首先需要修正你现有HTML的两个问题：

• 两组单选按钮共用同一个name="OptionChosen"，会导致选项互斥，无法独立选择，需给每组设置独立的name（比如likeRed和loveGreen）
• 存在无效的<p>标签嵌套（<p>不能包含<p>），需调整结构

下面提供两种可行方案，优先推荐服务器端渲染方案（适配PDF转换场景）：

方案1：服务器端动态生成HTML（推荐） #

大多数PDF转换工具优先解析静态HTML，直接在后端生成带checked属性的单选按钮是最可靠的方式。

实现步骤： #

1. 从数据库获取用户答案，建立数据库ID与表单选项的映射关系
2. 后端渲染HTML时，给匹配的单选按钮添加checked属性

示例代码（以PHP为例，其他后端语言逻辑一致）：

<?php
// 从数据库获取的用户答案ID示例
$userAnswerIds = ['100000000', '100000001'];

// 建立数据库ID到表单选项的映射
$answerMap = [
    '100000000' => ['question' => 'likeRed', 'value' => 'yes'],
    '100000001' => ['question' => 'loveGreen', 'value' => 'no']
];

// 转换为便于渲染的答案格式
$userAnswers = [];
foreach ($userAnswerIds as $id) {
    if (isset($answerMap[$id])) {
        $userAnswers[$answerMap[$id]['question']] = $answerMap[$id]['value'];
    }
}
?>
<html>
<body>
    <p>我喜欢红色:
        <input type="radio" name="likeRed" value="yes" <?= $userAnswers['likeRed'] === 'yes' ? 'checked' : '' ?> />
        是
        <input type="radio" name="likeRed" value="no" <?= $userAnswers['likeRed'] === 'no' ? 'checked' : '' ?> />
        否
    </p>

    <p>我喜欢绿色:
        <input type="radio" name="loveGreen" value="yes" <?= $userAnswers['loveGreen'] === 'yes' ? 'checked' : '' ?> />
        是
        <input type="radio" name="loveGreen" value="no" <?= $userAnswers['loveGreen'] === 'no' ? 'checked' : '' ?> />
        否
    </p>
</body>
</html>

方案2：客户端JavaScript设置（静态HTML场景） #

如果只能使用静态HTML，可以通过JS获取数据库答案后动态设置选中状态，但需注意部分PDF转换工具可能不执行JS，建议提前测试兼容性。

修正后的HTML+JS代码： #

<html>
<body>
    <p>我喜欢红色:
        <input type="radio" name="likeRed" value="yes" />
        是
        <input type="radio" name="likeRed" value="no" />
        否
    </p>

    <p>我喜欢绿色:
        <input type="radio" name="loveGreen" value="yes" />
        是
        <input type="radio" name="loveGreen" value="no" />
        否
    </p>

    <script>
        // 模拟从数据库接口获取的答案ID
        const userAnswerIds = ['100000000', '100000001'];

        // 数据库ID与表单选项的映射
        const answerMap = {
            '100000000': { question: 'likeRed', value: 'yes' },
            '100000001': { question: 'loveGreen', value: 'no' }
        };

        // 遍历设置单选按钮选中状态
        userAnswerIds.forEach(id => {
            const { question, value } = answerMap[id];
            const targetRadio = document.querySelector(`input[name="${question}"][value="${value}"]`);
            if (targetRadio) {
                targetRadio.checked = true;
            }
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者WheelsShark