javascript - 当我有一个空数组作为我的 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

因此，解决此问题的最佳方法包括三个部分。我们需要绑定(bind)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" />

现在，复选框完全反射(reflect)了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 = []" />

此时，复选框工作正常。 Checked 通常是一种双向绑定(bind)，但在我们上面的示例中它只是单向操作。我们可以做这个小优化:

<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

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