如何获取通过Heredoc从数据库渲染的选中单选框的值

嘿，我来帮你搞定这个单选框取值的问题！看你的代码是用PHP循环输出题目和对应选项的单选按钮，对吧？下面分两种常见场景给你解决方案：

一、后端PHP接收表单提交的选中值 #

如果是要等用户做完所有题目后提交表单，再获取选中值，核心是给同一题目的单选框设置关联的name属性，让提交的数据能对应到具体题目。

修改你的PHP输出代码 #

首先给表单加上提交目标，然后把单选框的name设置成数组格式，绑定对应的题目ID：

function take_assessment(){
    $query = query("SELECT * FROM assess_questions");
    confirm($query);
    
    // 先输出表单，指定提交方式和处理页面
    echo '<form method="POST" action="submit_assessment.php">';
    
    while($row = fetch_array($query)) {
        $question_id = $row['question_id'];
        $question_text = $row['question_text'];
        
        // 输出题目文本
        echo "<h3>{$question_text}</h3>";
        
        // 读取当前题目的所有选项（假设选项存在assess_options表，关联question_id）
        $option_query = query("SELECT * FROM assess_options WHERE question_id = {$question_id}");
        confirm($option_query);
        
        while($option_row = fetch_array($option_query)) {
            $option_value = $option_row['option_value']; // 比如选项的标识：A/B/C/D或数据库ID
            $option_text = $option_row['option_text'];
            
            // 用Heredoc输出单选框，name绑定题目ID为数组键
            echo <<<EOT
            <label>
                <input type="radio" name="answers[{$question_id}]" value="{$option_value}">
                {$option_text}
            </label>
            <br>
EOT;
        }
    }
    
    // 添加提交按钮
    echo '<button type="submit" name="submit_assessment">提交答案</button>';
    echo '</form>';
}

后端接收并处理值 #

在submit_assessment.php里，你可以通过$_POST获取所有选中的选项，每个值都会对应到题目ID：

if(isset($_POST['submit_assessment'])){
    // 遍历提交的答案，key是题目ID，value是选中的选项值
    foreach($_POST['answers'] as $question_id => $selected_value){
        echo "题目ID {$question_id} 的选中值是：{$selected_value}<br>";
        // 这里可以把答案存入数据库，或者进行评分逻辑处理
    }
}

二、前端JavaScript实时获取选中值 #

如果想在用户选中选项的瞬间就获取值（无需等待表单提交），可以给单选框添加事件监听：

给单选框添加类名方便JS选择 #

修改Heredoc部分，给每个单选框加上统一的类名：

echo <<<EOT
<label>
    <input type="radio" class="assessment-option" name="answers[{$question_id}]" value="{$option_value}">
    {$option_text}
</label>
<br>
EOT;

添加JavaScript监听事件 #

在页面底部或者<script>标签里添加这段代码：

// 监听所有单选框的change事件
document.querySelectorAll('.assessment-option').forEach(radioBtn => {
    radioBtn.addEventListener('change', function(){
        if(this.checked){
            // 从name属性里提取题目ID（比如name是answers[123]，提取123）
            const questionId = this.name.split('[')[1].slice(0, -1);
            const selectedValue = this.value;
            console.log(`题目ID ${questionId} 选中了：${selectedValue}`);
            
            // 这里可以用AJAX把值实时发送给后端，或者在前端做即时反馈
        }
    });
});

关键注意点 #

• 同一题目的所有单选框必须共享同一个name属性，这样浏览器会把它们视为一组，保证只能选中一个选项。
• 单选框的value属性要设置成你实际需要获取的内容（比如选项的数据库ID、选项文本或者A/B/C标识）。

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