knockout

by vivaxy

HTML

<h1>
    <input type="checkbox" data-bind="checked: selectedAllProduce" title="Select all/none" />Produce</h1>
<div data-bind="foreach: produce">
    <label>
        <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedProduce" /> <span data-bind="text: $data"></span>
    </label>
</div>

JavaScript

function MyViewModel() {
    this.produce = ['Apple', 'Banana', 'Celery', 'Corn', 'Orange', 'Spinach'];
    this.selectedProduce = ko.observableArray(['Corn', 'Orange']);
    this.selectedAllProduce = ko.computed({
        read: function () {
            return this.selectedProduce().length === this.produce.length;
        },
        write: function (value) {
            this.selectedProduce(value ? this.produce.slice(0) : []);
        },
        owner: this
    });
}
ko.applyBindings(new MyViewModel());