KnockoutJS - observing checkboxes

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:

After clicking the invisible book "visible" checkbox:

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:

HTML

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

Javascript

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.visible();
    });

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