JavaScript复选框计分问卷问题求助：结果始终返回zerotoOne

问题根源 #

• getScore()函数中的循环找到第一个勾选的复选框就执行break，导致仅获取第一个勾选框的分值（固定为1），完全没有统计总勾选数量。
• score变量未初始化，若未勾选任何复选框，会返回undefined，而undefined <= 1结果为true，同样触发zerotoOne响应。

修复代码 #

JavaScript部分（简化逻辑，适配后续扩展）

function getScore(){
    const form = document.forms["form"];
    const quest = form.elements["quiz"];
    let score = 0; // 初始化分数为0
    for(let i=0; i<quest.length; i++){
        if(quest[i].checked){
            score++; // 每勾选一个复选框加1分
        }
    }
    return score;
};

function getTotal(){
    const totalScore = getScore();
    document.getElementById('result').innerHTML = getComment(totalScore);
}

const zerotoOne = '你居然已经完全了解这些关于自己的特质，根本不需要做这个测试。或许你只是想看看所有可能的结果？玩得漂亮！';
const twotoSeven = '我发现，在你众多的天赋和特质中，谦逊依然是你的魅力之一！';

function getComment(score){
    if (score <= 1){
        return zerotoOne;
    } else if (score >=2 && score <=7){
        return twotoSeven;
    }
}

document.getElementById('submit').onclick = getTotal;

HTML部分（修正重复ID的不规范问题）

<div class="quiz-form">
    <form id="form" name="form">
        <fieldset id="controls">
            <p>
                <label>我喜欢为乐趣而阅读。
                    <input type="checkbox" name="quiz" id="quiz1" value="point" />
                </label>
                </br>
                <label>我喜欢写作。
                    <input type="checkbox" name="quiz" id="quiz2" value="point"/>
                </label>
                </br>
                <label>我喜欢其他自我表达形式，比如音乐和艺术。
                    <input type="checkbox" name="quiz" id="quiz3" value="point"/>
                </label>
                </br>
                <label>我觉得和他人讨论想法很兴奋。
                    <input type="checkbox" name="quiz" id="quiz4" value="point"/>
                </label>
                </br>
                <label>我喜欢思考复杂的挑战。
                    <input type="checkbox" name="quiz" id="quiz5" value="point"/>
                </label>
                </br>
                <label>我对世界充满好奇。
                    <input type="checkbox" name="quiz" id="quiz6" value="point"/>
                </label>
                </br>
                <label>我对广泛的学科感兴趣。
                    <input type="checkbox" name="quiz" id="quiz7" value="point"/>
                </label>
            </p>

            <p>
                <input type="button" name="submit" id="submit" value="提交" />
            </p>

            <p id="result"></p>
        </fieldset>
    </form>
</div>

CSS部分（保持原样式不变）

.quiz-form {
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:700px;
}

#form {
    text-align:left;
}

后续扩展建议 #

当你扩展到25个复选框及更多结果时，只需：

• 在HTML中新增name="quiz"的复选框，注意保持每个复选框的ID唯一。
• 新增对应分数区间的结果文本变量，比如eightToFifteen、sixteenToTwentyFive等。
• 修改getComment()函数的条件判断，覆盖新增的分数区间即可。

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