I've recently been having some trouble understanding how to make checkboxes update within KnockoutJS. I was trying to make a list dynamically update on the screen based on a tickbox...here's an example of what I was trying to do:

Before clicking the invisible book "visible" checkbox:

checkbox unselected

After clicking the invisible book "visible" checkbox:

checkbox selected

But, as much as this was what I wanted to happen, it wasn't the reality. The problem was that clicking the checkbox happily updated the checkbox, but wasn't making the record update in the book list.

After spending ages trying to (unsuccessfully) use the "click" binding on the checkbox, I found The Lanham Factor blog that helped me to understand the issue:

If binding the checkbox list to an observableArray, the “checked” attribute needs to be the observableArray, not a property name. KnockoutJS will automatically update the observableArray based on the state of the checkbox.

So, it was just a matter of making the visible property observable and then creating a subscription to the property to toggle the self.visible boolean:


<td><input type="checkbox" name="allBooksVisible" id="allBooksVisible" data-bind="checked: visible" /></td>


function Book(titleIn, authorIn, visibleIn) {
    var self = this;
    self.title = titleIn;
    self.author = authorIn;
    self.visible = ko.observable(visibleIn);
    self.visible.subscribe(function(updated) {

    self.bookListEntry = ko.computed(function() {
        return self.title + " by " + self.author;