KnockoutJS: Delete multiple items using checkbox and one delete button

Question

I'm developing a single page application using knockout.js and sammy.js.

I know how I can remove one item by attaching a button with a click event to each item like so:

self.deleteItem = function(item) {
    self.array.remove(item);
}

I'm trying to figure out how I can use checkboxes to remove multiple items at the same time.

Can someone point me in the right direction?

Thanks!

Answer 1

You can achieve this by adding new array to your vm for storing selected rows. Bind it to checkboxes using checked binding:

function ViewModel() {
    var self = this;

    self.items = ko.observableArray(["One", "Two", "Three"]);
    self.selectedItems = ko.observableArray();

    self.deleteSelected = function () {
        self.items.removeAll(self.selectedItems());
        self.selectedItems.removeAll();
    }
}

ko.applyBindings(new ViewModel());

<div data-bind="foreach: items">
    <input type="checkbox" data-bind="value: $data, checked: $parent.selectedItems" />
    <span data-bind="text: $data"></span>
    <br/>
</div>
<input type="button" value="Remove Selected" data-bind="click: deleteSelected" />

Here is an example: http://jsfiddle.net/zvFnW/