Knockout js checkbox count

Subscribe to a property inside of ObservableArray

<div id="colorList">
    Color List:
    <ul data-bind=" template : { name : 'simpleViewTemplate', foreach: colors }"></ul>
</div>
<div id="changedList">
    Changed List to Send to server:    ( Count: <span data-bind="text: changedColors().length"></span> )
    <ul data-bind=" template : { name : 'changedColorsTemplate', foreach: changedColors }"></ul>

</div>
<script type="text/x-jquery-tmpl" id="simpleViewTemplate">
    <li>
        <input type="checkbox" data-bind="checked: IsChecked"/> <font data-bind="text: Name, attr : { color: Name }"></font>
    </li>
</script>
<script type="text/x-jquery-tmpl" id="changedColorsTemplate">
    <li>
        <b><span data-bind="text: Id"/></b>
    </li>
</script>

var color = function (id, name, isChecked) {
    this.Id = ko.observable(id);
    this.Name = ko.observable(name);
    this.IsChecked = ko.observable(isChecked);
    this.IsCheckedOriginal = ko.utils.unwrapObservable(this.IsChecked);

    // Subscribe when checked changes and push or remove items
    this.IsChecked.subscribe(function () {
        if (this.IsChecked() != this.IsCheckedOriginal) {
            viewModel.changedColors.push(this);
        } else {
            viewModel.changedColors.remove(this);
        }
    }.bind(this));
};

var viewModel = {
    name: ko.observable(),
    colors: ko.observableArray([
    new color(101, "Red", false),
    new color(102, "Blue", false),
    new color(103, "Green", false),
    new color(104, "Violet", false)]),
    changedColors: ko.observableArray([]) // holds changed items - delta between all colors and unchecked colors
};

ko.applyBindings(viewModel);

DEMO