具有多个条件的复选框答案

【问题标题】：checkbox with multiple conditions具有多个条件的复选框
【发布时间】：2018-10-26 09:26:34
【问题描述】：

情况

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

瞄准

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

问题

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

让我们以this as an example.
在示例中，仅使用了input type="checkbox"，而不是整个网格。对于这个问题来说，这将是一个矫枉过正的问题。

我将如何从 unckecked（绿色背景）-> 检查 1（红色）然后 -> 检查 2（随机颜色）？

我可能会认为这是一项简单而无聊的任务，但我有点挣扎。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：