How to implement select/deselect all checkbox

https://groups.google.com/d/topic/knockoutjs/VzB78QP5lj4/discussion

by kougiland

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-1.2.1.js"></script>
<h1 data-bind="text: Title"></h1><br/>

<ul data-bind="template: { name: 'itemTemplate', foreach: Choices}"></ul>
<script type='text/html' id='itemTemplate'>
    <li>
        <input type='checkbox' data-bind="value: $data, checked: viewModel.SelectedChoices">
        <span data-bind="text: $data"></span>
    </li>
</script>
<hr />
<label><input type="checkbox" data-bind="checked: SelectAll" /> Select all</label>
<hr/>
<div data-bind="text: ko.toJSON(SelectedChoices)"></div>

JavaScript

var viewModel = 
{
    Title: ko.observable("My View Model Test"),
    Choices: ko.observableArray(["Apple", "Orange", "Pineapple", "Cherry"]),
    SelectedChoices: ko.observableArray([])
};

viewModel.SelectAll = ko.dependentObservable({
    read: function() {
        return this.SelectedChoices().length === this.Choices().length;
    },
    write: function(newValue) {
        this.SelectedChoices(this.SelectedChoices().length === this.Choices().length ? [] : this.Choices().slice(0));
    },
    owner: viewModel
});
    
ko.applyBindings(viewModel);