用淘汰赛检查我表中的所有复选框

Question

我在第一列有一个带有复选框的表格。在标题中，我还有一个复选框。单击此选项应检查我表中的所有复选框。

<table class="defaultGrid">
<thead>
    <tr>
        <th><input type="checkbox"></th>
        <th>ID</th>
        <th>Name</th>
    </tr>
</thead>
<tbody data-bind="foreach: model.Things">
    <tr data-bind="css: {selected: IsSelected}">
        <td><input type="checkbox" data-bind="checked: IsSelected" /></td>
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
    </tr>
</tbody>
</table>

这里是 jsfiddle：http://jsfiddle.net/jJ4H6/29/

如何通过淘汰赛来做到这一点？

谢谢。

Answer 1

您需要有一个函数遍历Things 集合中的所有项目并将IsSelected 设置为true 或false。

然后你可以在“主”复选框点击绑定这个函数：

<input type="checkbox" data-bind="click: selectAll"/>

示例实现如下所示：

self.selectAll = function(data, event)
{
    ko.utils.arrayForEach(self.model.Things (), function(item){
       if (event.target.checked)
          item.IsSelected(true);
       else
          item.IsSelected(false);
    });
    return true; //to trigger the browser default bahaviour
}

演示JSFiddle.

或者你可以在你的视图模型上有一个IsAllSelected 属性并使用checked 绑定而不是点击并在IsAllSelected 的更改事件中执行选择逻辑（或者你也可以使用可写的计算 observable ) .

如果您想支持以下场景，我认为最终您将需要这样的东西：全选 -> 手动取消选中每一行应该取消选中标题行等。

Another demo 使用 IsAllSelected 计算属性

self.IsAllSelected = ko.computed({
        read: function () {
            var isAllSelected = true;
            ko.utils.arrayForEach(self.model.Things(), function (item) {
                isAllSelected = isAllSelected && item.IsSelected()
            });
            return isAllSelected;
        },
        write: function (value) {
            ko.utils.arrayForEach(self.model.Things(), function (item) {
                if (value) item.IsSelected(true);
                else item.IsSelected(false);
            });
        }
});