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" />
<br/>
IsHappy <input type="checkbox" data-bind="checked: IsHappy"/>
IsSad <input type="checkbox" data-bind="checked: IsSad"/>
IsAngry <input type="checkbox" data-bind="checked: IsAngry"/>

CSS

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

JavaScript

var viewModel = {    
    allSelected: ko.observable(false),
    IsHappy: ko.observable(false),
    IsSad: ko.observable(true),
    IsAngry: ko.observable(false)
};

viewModel.allSelected.subscribe(function(newValue) {
    var _this = this;

    var checkboxes = Object.keys(_this).filter(function(k) { return k.indexOf('Is') == 0; });
    ko.utils.arrayForEach(checkboxes, function(banner) {        
       _this[banner](newValue); 
    });
}, viewModel);

ko.applyBindings(viewModel);