CI3框架下JSON存储问卷的Checkbox必选2项实现方案咨询

云上老周

2026-8-17

解决方案建议

核心问题回应

JSON里不能用if else实现限制：JSON是纯静态数据格式，仅能存储键值对、数组这类结构化数据，不支持任何代码逻辑（包括if else），验证逻辑必须放在前端JS、后端PHP这类代码层实现。
不需要把题目移到视图文件：用JSON存储题目数据的方式很合理，能实现数据与视图逻辑的分离，后续修改题目内容只需更新JSON，不用改动视图代码，维护性更强。
可以在视图中设置限制，content_url仅作URL生成辅助：content_url是CI3中生成资源/页面URL的工具函数，核心是在渲染多选框的视图里结合JS实现前端限制，同时必须配合后端验证兜底。

具体可行方案

方案1：前端JS即时验证（提升用户体验）

在渲染多选框的视图文件中，给每个checkbox添加统一类名，通过JS监听选择事件，实时限制选中数量：

<!-- 视图中渲染多选框的代码示例（结合JSON数据循环） -->
<?php foreach($question['choices'] as $choice): ?>
    <label>
        <input type="checkbox" name="choices[]" class="question-checkbox" value="<?= $choice['choice_variable'] ?>">
        <?= $choice['choice_text'] ?>
    </label>
<?php endforeach; ?>

<script>
// 实时限制选中数量
const checkboxes = document.querySelectorAll('.question-checkbox');
checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const checkedNum = document.querySelectorAll('.question-checkbox:checked').length;
        if (checkedNum > 2) {
            this.checked = false;
            alert('最多只能选2个选项');
        }
    });
});

// 表单提交前再次验证
document.querySelector('#question-form').addEventListener('submit', function(e) {
    const checkedNum = document.querySelectorAll('.question-checkbox:checked').length;
    if (checkedNum !== 2) {
        e.preventDefault();
        alert('必须且只能选择2个选项');
    }
});
</script>

方案2：后端CI3验证（防止恶意提交）

前端验证可被绕过，必须在控制器中做兜底验证：

// 控制器中的提交处理方法
public function submit_question() {
    // 获取用户提交的选中选项
    $selected_choices = $this->input->post('choices');
    
    // 验证选中数量
    if (!is_array($selected_choices) || count($selected_choices) !== 2) {
        $this->session->set_flashdata('error_msg', '必须且只能选择2个选项');
        redirect('questionnaire/show'); // 跳回问卷页面
    }
    
    // 验证通过，执行后续逻辑（如存储结果到数据库）
    // ...
}

方案3：JSON添加验证配置（增强扩展性）

给JSON题目添加验证规则字段，让代码可复用不同限制逻辑，不用硬编码数量：

{
    "part": "question",
    "type": "choice_checkbox",
    "validation": {
        "min_selected": 2,
        "max_selected": 2
    },
    "choices": [
        {
            "choice_text": "A. Pasif",
            "choice_variable": "A",
            "choice_value": 1
        },
        {
            "choice_text": "B. Delusi ",
            "choice_variable": "B",
            "choice_value": 1
        },
        {
            "choice_text": "C. Konsumtif",
            "choice_variable": "C",
            "choice_value": 1
        },
        {
            "choice_text": "D. Patuh",
            "choice_variable": "D",
            "choice_value": 1
        },
        {
            "choice_text": "E. Aktif",
            "choice_variable": "E",
            "choice_value": 1
        },
        {
            "choice_text": "F. Teratur",
            "choice_variable": "F",
            "choice_value": 1
        }
    ]
}

之后在视图和控制器中读取validation字段，动态生成验证逻辑：

视图JS中用<?= $question['validation']['max_selected'] ?>代替硬编码的2
控制器中用选中选项数量和$question['validation']['min_selected']/max_selected对比

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