根据“复选框”重新着色文本，选择HTML+ JS中的数字和序列

Recolor text based on "check box" select number and sequence in HTML+ JS

本文关键字：复选框 数字 JS HTML+ 选择 新着色 文本 根据      更新时间：2023-09-26
我想

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

我在 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，但我不知道该怎么做。

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

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

希望这有助于您入门。

相关文章：