title: Knockoutjs checkbox changed event
body: <p>I have some checkboxes bound to an array in my model. This works great, when you check a box the array is updated accordingly. </p>
  
  <p>However when the value has changed i wish to call a method on my model to filter the results given the new values. I have tried hooking up the change event but this seems to have the values prior to the change rather than after the change. </p>
  
  <p>I have illustrated my issue in a jsfiddle <a href="http://jsfiddle.net/LpKSe/" rel="noreferrer">http://jsfiddle.net/LpKSe/</a> which might make this make more sense. </p>
  
  <p>For completeness my code is repeated here. </p>
  
  <p>JS</p>
  
  <pre><code>function SizeModel() {
      var self = this;
      self.sizes = ko.observableArray(["small", "medium", "large"]);
      self.sizes2 = ko.observableArray(["small", "medium", "large"]);
      self.getResults = function(e) {
          alert(self.sizes());
      };
      self.getResults2 = function(e) {
          alert(self.sizes2());
      };
  }
  
  $(document).ready(function() {
      sizeModel = new SizeModel();
  
      ko.applyBindings(sizeModel);
  });​
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;h3&gt;Size
    &lt;input type="checkbox" value="small"  data-bind=" checked: sizes, event:{change: getResults}"/&gt;
    &lt;span class='headertext'&gt;Small&lt;/span&gt;
    &lt;input type="checkbox"  value="medium" data-bind=" checked: sizes, event:{change: getResults}"   /&gt;
    &lt;span class='headertext'&gt;Medium&lt;/span&gt;
    &lt;input type="checkbox"  value="large" data-bind=" checked: sizes, event:{change: getResults}"  /&gt;
    &lt;span class='headertext'&gt;Large&lt;/span&gt;
  &lt;/h3&gt;
  &lt;h3&gt;Size
   &lt;input type="checkbox" value="small"  data-bind=" checked: sizes2, event:{click: getResults2}"/&gt;
   &lt;span class='headertext'&gt;Small&lt;/span&gt;
   &lt;input type="checkbox"  value="medium" data-bind=" checked: sizes2, event:{click: getResults2}"   /&gt;
   &lt;span class='headertext'&gt;Medium&lt;/span&gt;
   &lt;input type="checkbox"  value="large" data-bind=" checked: sizes2, event:{click: getResults2}"  /&gt;
   &lt;span class='headertext'&gt;Large&lt;/span&gt;
  &lt;/h3&gt;
  </code></pre>