Question

I have following view model:

var viewModel = {
    List: ko.observableArray([ { Id: 1, Value: "Test 1" }, 
                               { Id: 2, Value: "Test 2" }, 
                               { Id: 3, Value: "Test 3" }
                              ]),
    // item with id "3" checked by default
    Selected: ko.observableArray(["3"])
};

And the view:

<div data-bind="text: Selected().length"></div>
<ul data-bind="foreach: List">
    <li class="checkbox">
        <label>
            <input type="checkbox" name="SelectedGroups" data-bind="attr: { value: Id }, checked: $root.Selected()" />
            <span data-bind="text: Value"></span>
        </label>
    </li>
</ul>

I want to display selected items count, but knockout doesn’t attach event listeners on change checkbox state. I tried to use computed properties, but it doesn’t work.

Although, if I manually (or from the script) push or pop items to the Selected array everything works.
What am I missing?

Please see fiddle for example.

Answer 1

You have an extra set of () in your checked binding, change it to:

data-bind="attr: { value: Id }, checked: $root.Selected"

and it should work see this fiddle and the documentation.