javascript - 具有多个条件的复选框

Question

情况

我有一个包含大量信息的网格。在每一行的开头都有一个复选框。

瞄准

点击一个复选框，它将被选中。再次点击同一个复选框，它仍然会被点击，但图标不同。一旦您第三次点击该框，它将变为未选中状态。

问题

我可以选中和取消选中复选框，但是我不知道如何仅在选中复选框后更改图标。

我们以this as an example为例.
在示例中，仅使用了 input type="checkbox" 而不是整个网格。这对这个问题来说太过分了。

我如何从未检查(绿色背景)-> 检查 1(红色)然后 -> 检查 2(随机颜色)？

我可能认为这是一项简单而笨拙的任务，但我有点难以接受。

Answer 1

您可以使用 :indeterminate CSS 伪类选择器来设置您的复选框在您要求的不确定状态时的样式。

引用链接:https://tympanus.net/codrops/css_reference/indeterminate/