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>
<button type="checkbox" data-bind="click: selectAll, checked: allSelected">button</button>
<ul data-bind="template: { name: 'bannerTmpl', foreach: banners }"></ul>

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

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"));
    },
    selectAll : function() {
        var all = this.allSelected();
        ko.utils.arrayForEach(this.banners(), function(banner) {
           banner.isSelected(!all); 
        });
        return true;
    }       

};

ko.applyBindings(viewModel);