title: Knockout Select/Unselect all and get the selected row values
body: <p>I am trying create a select/un-select all using knockout and get the values of the rows selected to save.</p>
  
  <p>I was able get select all and un-select all to work but not sure how to get the data of the selected rows.</p>
  
  <p>Also if select a row check box every rows check box gets selected or un-selected.  If I unselect a check box I want the select all checkbox to be unchecked.</p>
  
  <p>I created a fiddle of what I have done so far <a href="http://jsfiddle.net/adriandcosta/ewprL5bd/4/" rel="nofollow">http://jsfiddle.net/adriandcosta/ewprL5bd/4/</a></p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div style="height:40px"&gt;Results&lt;/div&gt;
  &lt;div id="results" style="display:none" data-bind="visible: showResults"&gt;
      &lt;table width="100%" id="tblSearchResults" data-bind="visible: SearchResults().length&gt;0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th align="left"&gt;Name&lt;/th&gt;
                  &lt;th&gt;Gender&lt;/th&gt;
                  &lt;th align="left"&gt;DOB&lt;/th&gt;
                  &lt;th align="left"&gt;Join Date&lt;/th&gt;
                  &lt;th style="width:26px"&gt;
                      &lt;input type="checkbox" data-bind="checked: allSelected" /&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="EmpResults" data-bind="template: { name:'TmplSearchResults', foreach: SearchResults }"&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The template</strong></p>
  
  <pre><code>&lt;script type="text/html" id="TmplSearchResults"&gt;
      &lt;tr style = "border-bottom: 1px solid #CCC;"&gt; 
          &lt;td valign = "middle" data-bind="text: name"&gt; &lt;/td&gt;
         &lt;td valign="middle" align="center" data-bind="text: gender"&gt;&lt;/td &gt; 
          &lt;td valign = "middle"   data-bind = "text: dob" &gt;&lt;/td&gt; 
       &lt;td valign="middle" data-bind="text: joindate"&gt;&lt;/td &gt; 
          &lt;td valign = "middle" &gt; 
              &lt;input type = "checkbox" data-bind = "checked:$parent.isSelected" &gt; 
                  &lt;/td&gt; 
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>View Model and Data</strong></p>
  
  <pre><code>var vmSearchResult;
  var vmSearchResultsModel = function () {
      var self = this;
      self.showResults = ko.observable(false);
      self.SearchResults = ko.observableArray([]);
      self.isSelected = ko.observable(false); // check box
      self.allSelected = ko.observable(false); // all select checkbox
  
      self.allSelected.subscribe(function (newValue) {
  
          ko.utils.arrayForEach(vmSearchResult.SearchResults(), function (PartnerSearch) {
              vmSearchResult.isSelected(newValue);  //&lt;== here I get the selected values need the whole row
  
          });
      });
  }
  
      function ShowData() {
      vmSearchResult.SearchResults(fakeData);
          vmSearchResult.showResults(true);
  
      }
  
  $(document).ready(function () {
      vmSearchResult = new vmSearchResultsModel();
      ko.applyBindings(vmSearchResult, document.getElementById("results"));
      ShowData();
  });
  //Fake data  
  var fakeData = [{
      "name": "Adrian D'Costa",
          "dob": "25-10-1984",
          "gender": "M",
          "joindate": "30-12-2004"
  }, {
  
      "name": "Janet D'Curz",
          "dob": "30-08-1992",
          "gender": "F",
          "joindate": "15-12-2005"
  }];
  </code></pre>