如何使复选框三态？

Question

使用的技术： Angular 5

场景：

• 我有一个带有复选框的树视图。每当数据加载到页面上时，根据我选中或取消选中复选框的属性。

待办事项：

• 当属性为 false 时，我想默认在复选框中添加一个十字标记。

下面是我的代码，它将使用复选框呈现树视图。

<tree-root #tree [options]="options" [nodes]="nodes">
    <ng-template #treeNodeTemplate let-node="node" let-index="index">
        <input (change)="check(node, !node.data.checked)"
               type="checkbox"
               [indeterminate]="node.data.indeterminate"
               [checked]="node.data.checked" class="css-checkbox">
        {{ node.data.name }}
</ng-template>
</tree-root>  

在上面的代码 sn-p 中，只要 node.data.checked 为真，那么我会默认选中复选框。每当 node.data.checked 为假时，我想在复选框中显示十字标记。

我在网上搜索过，但没有得到任何使用完整的链接。

有人可以帮我完成这项工作吗？

任何帮助将不胜感激。谢谢你。

Answer 1

当您触发[checked] 时，将应用:checked 伪类。您可以使用它来定位已选中的复选框（手动或以编程方式）。

在复选框中添加叉号有点困难，因为您无法将叉号添加到 input[type=checkbox] 本身。为了解决这个问题，您可以隐藏复选框本身（使用display: none），并使用与复选框关联的<label>，由标签的for 属性绑定。通过使用for，当点击标签时，您将模拟点击复选框本身。

标签可以设置为看起来像原来的复选框，并且还提供额外的灵活性，允许使用background-image（可用于显示十字架）之类的东西。

假设您的 <label> 元素直接位于您的 <input> 元素之后，您可以使用 adjacent sibling combinator (+) 和 input + label 等选择器来定位它们。这可以与 :checked 伪类链接，以设置选中复选框的标签样式：input:checked + label。

这是一个例子：

input[type=checkbox].css-checkbox {
  display: none;
}

input[type=checkbox].css-checkbox + label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 -15px;
}

.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/lite-x-red.png);
}

<input id="one" class="css-checkbox" type="checkbox" />
<label for="one" class="css-label"></label>

<input id="two" class="css-checkbox" type="checkbox" />
<label for="two" class="css-label"></label>

虽然一个复选框只能有 两个 状态（选中或未选中），但 Angular 的可能是更新关联的类 元素。如果你也想要一个勾号（或类似的），这是你最好的选择。

只需为值为真时创建一个类，在其为假时创建一个类，并根据值将相关类应用于标签。正类将有一个检查background-image，负类将有一个叉号。 'default' 将显示为空，如上例所示。