实现Checkbox总分变色及第二组复选框自动勾选功能咨询

以下是可直接运行的完整代码，所有逻辑均用原生JS实现，无外部依赖：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分数勾选联动</title>
<script>
function addTotals() {
    // 计算总分
    var scoreInputs = document.getElementsByName("score");
    var total = 0;
    for (var i = 0; i < scoreInputs.length; i++) {
        if (scoreInputs[i].checked) {
            total += parseFloat(scoreInputs[i].value);
        }
    }
    total = parseInt(total.toFixed(0));
    document.getElementsByName("total")[0].value = total;

    // 总分单元格颜色切换
    const totalCell = document.getElementById("totalCell");
    if (total >= 60) {
        totalCell.style.backgroundColor = "green";
    } else if (total >= 40) {
        totalCell.style.backgroundColor = "yellow";
    } else {
        totalCell.style.backgroundColor = "red";
    }

    // 联动第二组复选框
    const box2 = document.getElementById("box2");
    const box4 = document.getElementById("box4");
    // 处理Option2
    box2.checked = total >= 40;
    displayText(box2, 'textBox2');
    // 处理Option4
    box4.checked = total >= 60;
    displayText(box4, 'textBox4');
}

function displayText(checkBoxElm, textBoxId) {
    const textBox = document.getElementById(textBoxId);
    textBox.style.display = checkBoxElm.checked ? "inline" : "none";
}
</script>
</head>
<body>
<table id="scorecard" border="1">
<tr>
    <td><input name="score" value="40" type="checkbox" onclick="addTotals()" />Impossible</td>
    <td><input name="score" value="30" type="checkbox" onclick="addTotals()" />Hard</td>
    <td><input name="score" value="20" type="checkbox" onclick="addTotals()" />Medium</td>
    <td><input name="score" value="10" type="checkbox" onclick="addTotals()" />Easy</td>
    <td id="totalCell" bgcolor="red" rowspan="2" style="width:90px;text-align:center" ><input style="width:60px;text-align:center" value="0" readonly="readonly" type="text" name="total" /></td>
</tr>
</table>
<table id="report" border="1">
<tr>
    <td><input type="checkbox" id="box1" onclick="displayText(this,'textBox1')"><label for="box1">Option 1</label></td>
    <td><input type="checkbox" id="box2" onclick="displayText(this,'textBox2')"><label for="box2">Option 2</label></td>
    <td><input type="checkbox" id="box3" onclick="displayText(this,'textBox3')"><label for="box3">Option 3</label></td>
    <td><input type="checkbox" id="box4" onclick="displayText(this,'textBox4')"><label for="box4">Option 4</label></td>
    <td><input type="checkbox" id="box5" onclick="displayText(this,'textBox5')"><label for="box5">Option 5</label></td>
</tr>
</table>
<p id="main" style="display:block" contenteditable="true">
<span id="textBox1" style="display:none">Pears.</span>
<span id="textBox2" style="display:none">Apples.</span>
<span id="textBox3" style="display:none">Oranges.</span>
<span id="textBox4" style="display:none">Lemons.</span>
<span id="textBox5" style="display:none">Excel.</span>
</p>
</body>
</html>

核心调整说明 #

• 给总分单元格增加了唯一id totalCell，方便直接控制背景色，颜色判断按照从高到低的顺序（先判断≥60再判断≥40），避免逻辑覆盖错误
• 修正了自动勾选复选框不触发显隐的问题：修改box2、box4的checked属性后，手动调用displayText方法同步文本显隐状态，和手动点击效果完全一致
• 文本显隐的display属性从block改为inline，适配span元素的行内特性，不会出现文本换行的异常
• 修正了原HTML中末尾p标签未闭合的语法错误
• 第二组复选框的手动点击逻辑完全保留，手动操作优先级不受自动联动影响，自动联动仅会在分数变化时修改Option2和Option4的状态，不会影响其他复选框的手动设置

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