具有多個條件的復選框

Question

情況

我有一個包含大量信息的網格。 在每個新行的開頭都有一個復選框。

目的

單擊一個復選框，它將被選中。 再次單擊同一個復選框，它仍然會被單擊，但圖標不同。 第三次單擊該框后，它將變為未選中狀態。

問題

我可以選中和取消選中復選框，但是我不知道如何僅在選中復選框后更改圖標。

讓我們以此為例。
在示例中僅使用input type="checkbox"而不是整個網格。 對於這個問題來說，這將是一種矯枉過正。

我將如何從未選中（綠色背景）-> 選中 1（紅色）然后 -> 選中 2（隨機顏色）？

我可能認為這是一項簡單而笨拙的任務，但我有點掙扎。

Answer 1

首先，您必須創建一個自定義復選框，請參閱下一頁如何創建自定義復選框

然后，將自定義js添加到該自定義復選框。 希望這個幫助

Answer 2

解

感謝Mako提供的解決方案 。

使用名為“不確定”的“第三”屬性，您可以將可視的第三條件應用於復選框。 但是，不確定狀態只能通過JavaScript而不是HTML來應用。

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

Answer 3

您可以使用:indeterminate CSS偽類選擇器來設置復選框的樣式，使其處於您不確定的狀態。

參考鏈接： https : //tympanus.net/codrops/css_reference/indeterminate/