javascript - 基于 "check box"在 HTML+ JS 中选择数字和序列重新着色文本

Question

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

我在 HTML 页面的右侧有 10 个复选框可供选择，左侧有一个句子。我需要的是，在我选中前 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");
}

希望这有助于您入门。