当我有一个空数组作为我的 checked.bind 时，如何创建一个全选复选框

Question

我有一个第一列带有复选框的表格。我想在标题中有一个全选复选框。我不知道如何处理这个问题。

<template>
<table class="table table-hover">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" checked.bind="selected" model.bind="site" /></td>
<td>${site.id}</td>
</tr> 
</tbody>
</table>  
</template>

Answer 1

因此，解决此问题的最佳方法分为三个部分。我们需要绑定checked属性和indeterminate属性，并且需要处理 change 事件。

首先，我们希望每当selected数组具有items数组中的所有项目时，都会选中该复选框。所以：

<input type="checkbox" checked.bind="selected.length === items.length" />

每当选中所有项目时，都会选中该复选框，但选中该复选框对selected数组没有影响。

接下来，我们希望每当数组selected数组中有一些但不是全部项目时，复选框都是不确定的items数组。所以：

<input type="checkbox 
checked.bind="selected.length === items.length"
indeterminate.bind="selected.length > 0 && selected.length < items.length" />

现在，该复选框完全反映了selected数组的状态，但仍然对selected数组没有影响。

最后，我们可以侦听复选框上的change事件，以便在选中或取消选中复选框时更新selected数组。我在下面使用一个内联处理程序，在此处理程序中$event.target是复选框本身。

<input type="checkbox"
checked.bind="selected.length === items.length"
indeterminate.bind="selected.length > 0 && selected.length < items.length"
change.delegate="$event.target.checked ? selected = items.slice() : selected = []" />

此时，复选框工作正常。检查通常是双向绑定，但在上面的示例中，它仅单向操作。我们可以做这个小的优化：

<input type="checkbox"
checked.one-way="selected.length === items.length"
indeterminate.one-way="selected.length > 0 && selected.length < items.length"
change.delegate="$event.target.checked ? selected = items.slice() : selected = []" />

有关工作示例，请参阅此gist.run：https://gist.run/?id=61cc823708ff7f6ba195de9ff0353049

请注意，我通常发现创建一个封装此行为的自定义元素很有用。