javascript - 基于 HTML+ JS 中的“复选框”选择数字和序列重新着色文本

Question

我猜这是一个奇怪的问题，但我也没有找到解决它的方法。

我在 HTML 页面的右侧有 10 个复选框可供选择，左侧有一个句子可供选择。我需要的是，在我选中前 4 个复选框之前，句子应该保持红色。

如果我进一步检查第 5~7th [即第 1 到第 7] 复选框左侧的句子应该是黄色的。

如果我选中整个复选框，左侧应该是绿色的。

----------------------------------------

                                   |   check box 1
                                   |   check box 2
                                   |   check box 3
                                   |   check box 4
Sentence to be colored             |   check box 5
                                   |   check box 6
                                   |   check box 7
                                   |   check box 8
                                   |   check box 9
                                   |   check box 10
                                   |

---

我相信我应该为此使用 JavaScript，但我不知道该怎么做。

Answer 1

使用 jQuery，你可以做一些类似的事情

if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) //etc do this for each checkbox up to 7
{
    $("#Sentence").css("color", "yellow");
}

希望这有助于您入门。