Question

我有一个复选框列表，我希望能够选择并取消选择所有选项，并将所选值存储在挖空阵列中。

这是我的HTML

<a><span data-bind="click: selectAllUsers">SELECT ALL</span></a>
<a><span data-bind="click: deselectAllUsers">DESELECT ALL</span></a>
<ul data-bind="foreach: users">
      <li>
            <input type="checkbox" data-bind="checked: $parent.selectedUsers" />
            <span data-bind="text: name"></span>
      </li>
</ul>

这是我的javascript部分：

var userData = //populated earlier
self.users = ko.observableArray([]);
self.selectedUsers = ko.observableArray([]);
self.selectAllUsers = function () {
    self.selectedUsers(userData)
}

self.deselectAllUsers = function () {
    self.selectedUsers([]);
}

初始化视图模型时，用户和selectedUsers都初始化为存储在userData中的用户对象数组。现在看来，复选框不会自动检查，当我选中/取消选中复选框时，它会影响复选框中的所有选项。理想情况下，它只会更改所选复选框并更新selectedUsers。

Answer 1

如果您的复选框没有value属性，则必须使用checkedValue绑定指定相应的值。在你的情况下：

 <input type="checkbox" data-bind="checked: $parent.selectedUsers, checkedValue: $data" />

https://jsfiddle.net/xrxskyx8/1/

使用Knockout更新选中的框并存储选定的值

1 个答案: