I have a list a checkbox list which I want to be able to select and deselect all of the options, and store the selected values in a knockout array.
Here's my 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>
And here's the section of my javascript:
var userData = //populated earlier
self.users = ko.observableArray([]);
self.selectedUsers = ko.observableArray([]);
self.selectAllUsers = function () {
self.selectedUsers(userData)
}
self.deselectAllUsers = function () {
self.selectedUsers([]);
}
When the view model is initialized, users and selectedUsers and both initialized to the array of user objects stored in userData. As it stands now, the checkboxes are not automatically checked and when I do check/uncheck one it affects all options in the checkbox. Ideally it would only change the selected checkbox and update selectedUsers.
Aucun commentaire:
Enregistrer un commentaire