Question

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

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

或者您可以在viewmodel上使用IsAllSelected属性并使用checked绑定而不是点击，并在IsAllSelected的更改事件中执行选择逻辑（或者您可以也使用可写的计算可观察量）。

我认为如果你想支持以下场景，最终你需要这样的东西：select all - ＆gt;手动取消选中每行应该取消选中标题行等。

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

用敲门检查我表格中的所有复选框

1 个答案: