Knockout.js Checkbox All

August 6, 2013

Knockout.js is powerfully awesome. I’ve been learning it for a client and I figured I could explain an example to help anyone else that is new to Knockoutjs.

I set out to create a “select all” checkbox for a list of possible checkboxes in the list.

First I created a function to define my listItem class:

function listItem(name, artType, artSize) {
    return {
        isSelected : ko.observable(false),
        name : ko.observable(name)
    };
}

After I added the magic aka the ViewModel:

var viewModel = {
    listItem : ko.observableArray([new listItem("item #1"), new listItem("item #2"), new listItem("item #3")]),
    allSelected: ko.observable(false),
    selectAll : function() {
        var all = this.allSelected();
        ko.utils.arrayForEach(this.listItem(), function(listItem) {
           listItem.isSelected(!all);
        });
        return true;
    }
};

ko.applyBindings(viewModel);

Of course this isn’t everything. Knockout has a templating feature that I use in my HTML to loop through ko.observableArray as such:

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

and then call in:

<ul data-bind="template: { name: 'liTemplate', foreach: listItem }"></ul>

That’s it! Below is the jsFiddle example: