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

Question

您好，我正在用 Angular 开发 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。

如果你绑定到change 事件，你可以传递复选框，像这样

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

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

toggle(cb) {
  if (cb.readOnly) cb.checked = cb.readOnly = false;
  else if (!cb.checked) cb.readOnly = cb.indeterminate = true;
}

Here is a StackBlitz demo