Question

使用的技术： Angular 5

场景：

我有一个带复选框的树状视图。每当将数据加载到页面上时，都会根据我正在选中或未选中复选框的属性来。

Todo：

每当属性为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>

在以上代码段中，只要 node.data.checked 为true，则默认情况下将复选框选中。每当 node.data.checked 为假时，我要在复选框中显示十字标记。

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

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

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

Answer 1

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

在复选框中添加一个十字会有点困难，因为您不能在input[type=checkbox]本身中添加一个。要解决此问题，您可以隐藏复选框本身（使用display: none），并使用与复选框相关联的<label>，并受标签的for属性限制。通过使用for，在单击标签时，您将模拟单击复选框本身。

标签的样式可以像原始复选框一样外观，并且还提供了更大的灵活性，允许使用background-image之类的东西（可用于显示十字形）。 / p>

假设<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，而消极的阶级将有一个十字。如上例所示，“默认”将显示为空。

如何使复选框为三态？

1 个答案: