如何将第三状态添加到复选框？

Question

您好，我正在按角度开发Web应用程序。我正在显示具有三种状态的复选框。我正在使用CSS类来区分状态。三种状态带有交叉标记，选中标记和空白。下面是实现部分。

<div *ngIf="node.data.checked==true && node.data.allow==true">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
        <span class="checkmark"></span>
        {{ node.data.name }}
    </label>
</div>

<div *ngIf="node.data.checked==true && node.data.allow==false">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate" [checked]="node.data.checked">
        <span class="checkmark xmark"></span>
        {{ node.data.name }}

    </label>
</div>

<div *ngIf="node.data.checked==false">
    <label class="container">
        <input (change)="check(node, !node.data.checked)" type="checkbox" [indeterminate]="node.data.indeterminate">
        <span class="checkmark"></span>
        {{ node.data.name }}

    </label>
</div>

我在上面附加了UI图像。

设备模型1包含叉号，设备模型2包含复选标记，设备模型4包含空白。这是三个状态。现在，当用户单击复选框的任一状态时，应该在以下路径中进行更改。

blank --> checked --> cross --> blank

以上是循环路径。例如，如果选中该复选框，则当用户单击该复选框时，该复选框应变为十字形；如果用户再次单击，则为空白；如果用户再次单击，则再次选中。显示部分我已经完成。有人可以像我上面所说的那样帮助我完成这项工作吗？任何帮助，将不胜感激。谢谢。

Answer 1

您可以为此使用checkbox indeterminate state。

如果您绑定到const int size_of_the_array = 10; std::array<std::string, size_of_the_array> arr; 事件，则可以通过此复选框，

change

然后您可以创建切换功能，如上面的链接所示：

<input type="checkbox" (change)="toggle($event.target)" />

Here is a StackBlitz demo