Knockout.js “select all” checkboxes

http://stackoverflow.com/questions/5969162/knockout-js-select-all-checkboxes/5969331#5969331

by cgough

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<input type="checkbox" data-bind="checked: allSelected" />
<ul data-bind="template: { name: 'bannerTmpl', foreach: banners }"></ul>

    <li id="bannerTmpl">
        <input type="checkbox" data-bind="checked: isSelected" />
        <span data-bind="text: name"></span>
    </li>

CSS

td { vertical-align: top; padding: 5px; }

JavaScript

// Define a "banner" class
function banner(inventory, name, artType, artSize) {
    return {
        isSelected : ko.observable(false),
        inventory : ko.observable(inventory),
        name : ko.observable(name),
        artType : ko.observable(artType),
        artSize : ko.observable(artSize)

    };
}

var viewModel = {
    banners : ko.observableArray([new banner("network", "Banner #1"), new banner("oo", "Banner #2")]),
    allSelected: ko.observable(false),
    addBanner : function() {
        this.banners.push(new banner("network", "Banner"));
    }      
};

viewModel.allSelected.subscribe(function(newValue) {
    ko.utils.arrayForEach(this.banners(), function(banner) {
       banner.isSelected(newValue); 
    });
}, viewModel);

ko.applyBindings(viewModel);