title: knockout check all checkboxes in table column
body: <p>I am new to knockout and trying to implement a table with the first column as a checkbox. When I click the header the whole column should get checked / unchecked. At the moment, it works when I click table rows (all rows get checked/unchecked) but not on table header. Please let me know what is wrong with my code! Here is parts of my code :</p>
  <pre><code>        &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;input type=&quot;checkbox&quot; data-bind=&quot;click: selectAll&quot;&gt;&lt;/th&gt;
                  &lt;th&gt;Notes&lt;/th&gt;
              &lt;/tr&gt;
          
              &lt;tbody data-bind=&quot;foreach: DocumentRows&quot;&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type=&quot;checkbox&quot; data-bind=&quot;checked: $parent.IsSelected&quot;&gt;&lt;/td&gt;
               &lt;td&gt;&lt;data-bind=&quot;text: Notes&quot;&gt;&lt;/td&gt;
  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          
         // Script.ts
          
          ```
          define(['knockout', 'jquery', 'text!./Template'], (ko, $, htmlString) =&gt; {
          //Document
          class Document {
                  Id: KnockoutObservable&lt;number&gt;;      
                  Notes: KnockoutObservable&lt;string&gt;;        
                  constructor(data?) {
                      this.Id = ko.observable(0);          
                      this.Notes = ko.observable(&quot;&quot;).extend({ defaultValue: &quot;&quot; });            
                      if (data != null) {
                          ko.mapping.fromJS(data, {}, this);
                      }
                  }        
              };
          
          
          //DocumentS VIEW MODEL
          class DocumentsViewModel {
          DocumentRows: KnockoutObservableArray&lt;Document&gt;;
          IsSelected: KnockoutObservable&lt;boolean&gt;;
                 
          constructor(params) {
          this.DocumentRows = ko.observableArray([]);
          this.IsSelected = ko.observable(false);//
          this.InitComputed();       
                 this.Load();
          }
          InitComputed = () =&gt; {
          selectAll = (Document: DocumentsViewModel) =&gt; {      
                      var doc = Document.DocumentRows;           
                      ko.utils.arrayForEach(doc(), function (item) {
                          item.IsSelected(true);
                      });
                  }
          
          Load = () =&gt; {
                      DocumentsApiService.GetDocumentList(this);
                  }
          
          }
          
          //API SERVICE
          class DocumentsApiService {
                  static GetDocumentList = (model: DocumentsViewModel) =&gt; {
                      $.ajax({
                          url: buildUrl(model.LoadListURL, { 'id': model.ObjectId(), 'additionalId': model.AdditionalId() }),
                          type: 'POST',
                          data: ko.mapping.toJSON(model.Filter),
                          contentType: 'application/json; charset=utf-8'
                      }).done(allData =&gt; {
                          var mapped = ko.mapping.fromJS(allData, DocumentsMapping);
                          model.DocumentRows(mapped.DocumentRows());
                          model.Filter.TotalCount(mapped.TotalCount());
                          model.Filter.PageIndex(mapped.Filter.PageIndex());
                          CalcCountTableStatus(model.Filter.PageIndex(), model.Filter.PageSize(), model.Filter.TotalCount(), 'documents-count-status-line');
                      }).fail(data =&gt; {
                          TSCore.OnFailure(data);
                      });
                  }
          }
          
              return { viewModel: DocumentsViewModel, template: htmlString }
          });
          ```
  </code></pre>