title: How to update selected items count on check event in Knockout?
body: <p>I have following view model:</p>
  
  <pre><code>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"])
  };
  </code></pre>
  
  <p>And the view:</p>
  
  <pre><code>&lt;div data-bind="text: Selected().length"&gt;&lt;/div&gt;
  &lt;ul data-bind="foreach: List"&gt;
      &lt;li class="checkbox"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" name="SelectedGroups" data-bind="attr: { value: Id }, checked: $root.Selected()" /&gt;
              &lt;span data-bind="text: Value"&gt;&lt;/span&gt;
          &lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Although, if I manually (or from the script) push or pop items to the <code>Selected</code> array everything works.
  What am I missing?</p>
  
  <p>Please see <a href="http://jsfiddle.net/aVksh/5/" rel="nofollow">fiddle</a> for example.</p>