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

Question

我有一个 table，第一列是复选框。我想在 header 中有一个 select 全部复选框。我不确定如何解决这个问题。

<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 = []" />

此时，复选框运行良好。 Checked 通常是一种双向绑定，但在我们上面的示例中它只是单向操作。我们可以做这个小优化：

<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

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

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

How do I create a select all checkbox when I have an empty array as my checked.bind

html

javascript

aurelia