當我有一個空數組作為我的 check.bind 時，如何創建一個 select 全部復選框

Question

我有一個帶有復選框的表格作為第一列。 我想在 header 中有一個 select all 復選框。 我不確定如何解決這個問題。

<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事件。

首先，我們希望在所選數組包含items數組中的所有項目時selected復選框。 所以：

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

This checks the checkbox whenever all items are selected, but checking the checkbox has no effect on the selected array yet.

接下來，只要selected數組在items數組中有一些但不是所有項，我們希望復選框是不確定的。 所以：

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

現在，該復選框完全反映了selected陣列的 state，但仍然對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

請注意，我通常發現創建一個封裝此行為的自定義元素很有用。