css - 用 knockout 检查我表中的所有复选框

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/

如何用 knockout 来完成这个？

谢谢。

Answer 1

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

然后你可以在“main”复选框点击绑定(bind)这个函数:

<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 .

或者你可以在你的 View 模型上有一个 IsAllSelected 属性，并使用 checked 绑定(bind)而不是点击，并在 的更改事件中执行选择逻辑IsAllSelected(或者您也可以使用可写的计算可观察对象)。

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

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);
            });
        }
});