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

Question

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

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

如果我进一步检查第5~7号[即第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");
}

希望这有助于您入门。