Select all check boxes using knockout.js

by Menuka Ishan

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<ol data-bind="foreach: Items">
    <li><label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Name"></span></label></li>
</ol>
<label><input type="checkbox" data-bind="checked: AllChecked" />Check all</label>

JavaScript

var viewModel = new
function() {
    var self = this;
    self.Items = [
        { Name: 'Option 1',
        IsChecked: ko.observable(false)},
        { Name: 'Option 2',
        IsChecked: ko.observable(false)},
    {
        Name: 'Option 3',
        IsChecked: ko.observable(false)},
    {
        Name: 'Option 4',
        IsChecked: ko.observable(false)}
    ];
    self.AllChecked = ko.computed({
        read: function() {
            var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) {
                return item.IsChecked() == false;
            });
            return firstUnchecked == null;
        },
        write: function(value) {
            ko.utils.arrayForEach(self.Items, function(item) {
                item.IsChecked(value);
            });
        }
    });
};

ko.applyBindings(viewModel);