具有多个条件的复选框

Question

情况

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

目标

单击一个复选框，它将被选中。再次单击相同的复选框，它仍然会被单击，但是图标不同。第三次单击该框时，它将变为未选中状态。

问题

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

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

我将如何从绿色（绿色背景）开始->选中1（红色），然后->选中2（随机颜色）？

我可能会想象这是一个简单而笨拙的任务，但是我对此颇为挣扎。

Answer 1

首先，您必须创建一个自定义复选框，请参考以下页面 How to create custom checkbox

然后，将自定义js添加到该自定义复选框。希望有帮助

Answer 2

解决方案

感谢Mako的solution。

使用名为“不确定”的“第三”属性，您可以将可视的第三条件应用于复选框。但是，不确定状态只能通过JavaScript而不是HTML来应用。

更多信息可在提供的链接中找到。

Answer 3

您可以使用:indeterminate CSS伪类选择器来设置复选框的样式，使其处于您不确定的状态。

参考链接：https://tympanus.net/codrops/css_reference/indeterminate/