Knockout.js “select all” checkboxes

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

by mcannon

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<input type="checkbox" data-bind="checked: allSelected" />
<hr/>
<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"),
         new banner("xx", "Banner #3"),
         new banner("ee", "Banner #4"),
         new banner("f", "Banner #5")
        ]),
    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);