javascript - 使用 knockout 选择所有复选框

Question

我正在尝试使用 knockout 来选择所有复选框。这是我的 View 模型

function MasterViewModel() {
var self = this;
self.People = ko.observableArray([new Person("Test1", false), new Person("Test2", false)]);
self.selectedAllBox = ko.observable(false);

self.selectedAllBox.subscribe(function (newValue) {
    if (newValue == true) {
        ko.utils.arrayForEach(self.People(), function (item) {
            item.sel = true;
        });
    } else {
        ko.utils.arrayForEach(self.People(), function (item) {
            item.sel = false;

        });
    }
});

 }
Person = function (name, sel) {
this.Name = name;
this.sel = sel;
}

ko.applyBindings(new MasterViewModel());

这是我的看法

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>
            <input type="checkbox" data-bind="checked: selectedAllBox" />
        </th>
    </tr>
</thead>
<tbody data-bind="foreach: $data.People">
    <tr>
        <td data-bind="text: Name"></td>
        <td class="center">
            <input type="checkbox" data-bind="checked: sel" />
        </td>
    </tr>
</tbody></table>

我无法让它检查所有。这是我的 Fiddle .你能告诉我我做错了什么吗？

Answer 1

您需要使 person 中的 sel 属性可观察:

Person = function (name, sel) {
    this.Name = name;
    this.sel = ko.observable(sel);
}

并且您需要将此可观察值设置为 selectedAllBox.subscribe:

self.selectedAllBox.subscribe(function (newValue) {
    if (newValue == true) {
        ko.utils.arrayForEach(self.People(), function (item) {
            item.sel(true);
        });
    } else {
        ko.utils.arrayForEach(self.People(), function (item) {
            item.sel(false);

        });
    }
});

演示 JSFiddle .