Create A CheckBox List With Knockout

  • Estimated read time: 4 min read
  • Written by Chad Campbell on Aug 13th 2013

Occasionally, you want to allow a user to select multiple related options. A lot of times, this task is tackled with the help of a checkbox list. This post will show you how to create a checkbox list using Knockout. Adding a checkbox list to your page involves the following seven steps.

Step 1: Define the checkbox list frame

Use a DIV element and set the overflow-y CSS value to scroll. This approach will allow you to take control of your layout. For instance, you can set the height and width of your checkbox list more easily.

    .checkboxList {
        border:1px solid #000;
        height: 100px; 
        overflow-y: scroll;

<div id="teamCheckboxList" class="checkboxList">

Step 2: Create a checkbox item template

Decide how you want a checkbox item in your checkbox list to look. Once decided, create the template in a SCRIPT element. For the sake of this example, we'll use the following HTML.

<script type="text/html" id="teamCheckboxListItem-template">
        <input type="checkbox" data-bind="value: id, checked: isChecked" />
        <span data-bind="text: name"></span>

From this snippet, its important recognize two things. First, notice that the type of the SCRIPT element is set to 'text/html'. This is needed to ensure that the markup is not viewed as JavaScript. Also take note that the id property of the SCRIPT element is added. The id property will be used later to reference the template.

Step 3: Define your view model

A view model is a key concept in the Knockout world. It helps us seperate our UI from data. The details of view model are beyond the scope of this post. Still, in the context of this example, we'll use the following view model.

var MyViewModel = function (ko) {

This short snippet defines a basic view model that will be bound to the UI later. For your specific case, you may need to refer to the [Knockout documentation].

Step 4: Add an observable array property

We want to bind to a collection of objects. The best way to handle that is by exposing a property as an observableArray. As shown in the code snippet below, we've added an observableArray of objects called teams

this.teams = ko.observableArray([
    { name: "Red", id: 0 }, 
    { name: "Blue", id: 1 }, 
    { name: "Green", id: 2 }

Step 5: Add a flag

Expose a flag called "isChecked" or "isSelected" on your objects. This will be used to keep the view model in sync with the user experience. This flag is even more important if you need to synchronize data between your client-side environment and a server-side environment like Node. Here's an updated version of our last snippet.

this.teams = ko.observableArray([
    { name: "Red", id: 0, isChecked: true }, 
    { name: "Blue", id: 1, isChecked: false }, 
    { name: "Green", id: 2, isChecked: true }

Step 6: Activate knockout

Use your fully defined view model and activate Knockout. First, you must initialize an instance of your view model. Then, you have to leverage Knockout's applyBindings method. These two steps are shown in the code snippet below.

var viewModel = null;
$(document).ready(function() {
    viewModel = new MyViewModel();

Step 7: Define your bindings

Decorate the DIV element created in Step 1 with a data-bind attribute. This attribute can be used to identify what is being bound to. Here is what our DIV from step 1 looks like updated:

<div id="teamCheckboxList" class="checkboxList" data-bind="template: { name: 'teamCheckboxListItem-template', foreach: teams }">

The above snippet binds to the collection of teams completed in step 5. Each of those teams are displayed via the template created in step 2.

These seven steps show how to create a checkbox list using Knockout. If you want to see a completed example, you may download it from here. If you're curious about how to create a checkbox list with Angular instead, please visit here. If you have any questions or comments related to this post, please leave them in the comments below. If you would like other help from Ecofic, please contact us.


comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.

Follow Chad Online