title: Knockout.js Checkbox checked and click event
body: <p>We're trying to implement a checkbox and list with the following functionality:</p>
  
  <ul>
  <li>Clicking the checkbox will either clear the array if there are items in there, or add a new item if not.</li>
  <li>Remove an item from the array when clicking the Remove button, once the last item is removed the checkbox automatically unchecks itself.</li>
  </ul>
  
  <p>The problem I am having is that if you click to remove each array item, then click the checkbox to add a blank entry, I'm expecting the checkbox to be checked again (as per the checked observable), however it is not?</p>
  
  <p>I have the following code:</p>
  
  <p><a href="http://jsfiddle.net/UBsW5/3/" rel="noreferrer">http://jsfiddle.net/UBsW5/3/</a></p>
  
  <pre><code>    &lt;div&gt;
          &lt;input type="checkbox" data-bind="checked: PreviousSurnames().length &gt; 0, click: $root.PreviousSurnames_Click" /&gt;Previous Surname(s)?
      &lt;/div&gt;
      &lt;div data-bind="foreach: PreviousSurnames"&gt;
          &lt;div&gt;
              &lt;input type="text" data-bind="value: $data"&gt;
              &lt;span data-bind="click: $root.removePreviousSurname"&gt;Remove&lt;/span&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  
  
  var myViewModelExample = function () {
      var self = this;
  
      self.PreviousSurnames = ko.observableArray(['SURNAME1', 'SURNAME2', 'SURNAME3']);
  
      self.removePreviousSurname = function (surname) {
          self.PreviousSurnames.remove(surname);
      };
  
      self.PreviousSurnames_Click = function () {
          if (self.PreviousSurnames().length === 0) {
              self.PreviousSurnames.push('');
          }
          else {
              self.PreviousSurnames.removeAll();
          }
          alet(2)
      }
  
  }
  
  ko.applyBindings(new myViewModelExample());
  </code></pre>