Ko Checkboxes with checks

knockout checkboxes with a select all checkbox

by Asle Gundersby

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<label><input type="checkbox" data-bind="checked: AllChecked" />All Fiction</label>
<ol data-bind="foreach: Genres">
    <li><label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Name"></span></label></li>
</ol> 
<hr/>
<label><input type="checkbox" data-bind="checked: AllCheckedNF" />All Non-Fiction</label>
<ol data-bind="foreach: GenresNF">
    <li><label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Name"></span></label></li>
</ol>

JavaScript

var viewModel = new
function() {
    var self = this;
    self.Genres = [
        { Name: 'Fantasy',
        IsChecked: ko.observable(false)},
        { Name: 'Fiction',
        IsChecked: ko.observable(false)},
    {
        Name: 'Children',
        IsChecked: ko.observable(false)},
    {
        Name: 'Adults',
        IsChecked: ko.observable(false)}
    ];
    self.GenresNF = [
        { Name: 'Sport',
        IsChecked: ko.observable(false)},
        { Name: 'Technology',
        IsChecked: ko.observable(false)},
    {
        Name: 'Business',
        IsChecked: ko.observable(false)},
    {
        Name: 'Philosophy',
        IsChecked: ko.observable(false)}
    ];
    self.AllChecked = ko.computed({
        read: function() {
            var firstUnchecked = ko.utils.arrayFirst(self.Genres, function(item) {
                return item.IsChecked() == false;
            });
            return firstUnchecked == null;
        },
        write: function(value) {
            ko.utils.arrayForEach(self.Genres, function(item) {
                item.IsChecked(value);
            });
        }
    });
    self.AllCheckedNF = ko.computed({
        read: function() {
            var firstUnchecked = ko.utils.arrayFirst(self.GenresNF, function(item) {
                return item.IsChecked() == false;
            });
            return firstUnchecked == null;
        },
        write: function(value) {
            ko.utils.arrayForEach(self.GenresNF, function(item) {
                item.IsChecked(value);
            });
        }
    });
};

ko.applyBindings(viewModel);