title: Checkable table header checkbox is not working
body: <p>I am using jQuery datatable with ICheck box in my MVC4 application.</p>
  
  <p><img src="https://i.stack.imgur.com/Kl81P.png" alt="enter image description here"></p>
  
  <p>I try to fired the event of header check box click but it's not working please see my code. </p>
  
  <p>below.</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;table id="tblItems" class="table table-bordered table-checkable"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="checkbox-column"&gt;
                          &lt;input type="checkbox" class="icheck-input" /&gt;
                      &lt;/th&gt;
                      &lt;th&gt;Item No&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
  
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>    $(document).ready(function () {
  
      var elementName = "#tblItems";
  
      $(elementName).dataTable({
          bProcessing: false,
          bLengthChange: false,
          bInfo: false,
          bPaginate: false,
          sAjaxSource: '@Url.Action("GetNeedsToDispatchOrders", "Dispatch")',
              aoColumns: [
                 {
                     mRender: function (o) { return '&lt;td class="checkbox-column"&gt;&lt;input type="checkbox" class="icheck-input" /&gt;&lt;/td&gt;'; }
                 },
                 { sTitle: "Item No", bSortable: false, },
                 { sTitle: "Name", bFilterable: true, bSortable: false, },
              ],
              "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                  var row = $(nRow).attr("id", $('td:eq(0)', nRow).html());
                  $('td', nRow).on('click', function (e) {
                      if ($(this).hasClass('action'))
                          e.stopPropagation();
                  });
                  //Edit
                  row.find('.clsEdit').click(function () {
  
                      var node = $(this).closest('tr');
                      var table = $(elementName).DataTable()
                      var column_data = table.row(node).data()[0];
                  });
                  //Delete
                  row.find('.clsDelete').click(function () {
  
                      var node = $(this).closest('tr');
                      var table = $(elementName).DataTable();
                      var column_data = table.row(node).data()[0];
                  });
                  //Row click for details popup
                  row.click(function () {
                      var idx = $(this).closest('tr');
                      var table = $(elementName).DataTable();
                      var column_data = table.row(idx).data()[0];
                  });
              }
          });
      });
  </code></pre>
  
  <p>I need to check or uncheck all row checkbox in the header checkbox checked change event.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I change my header checkbox html like</p>
  
  <pre><code> &lt;input type="checkbox" id="thChk" class="icheck-input" /&gt;
  </code></pre>
  
  <p>and my script</p>
  
  <pre><code>    $('#tblItems').on('change', '#thChk', function (event) {
          alert(this.checked);
  
          $('#tblItems tbody tr input[type=checkbox]').each(function () {
              $(this).prop('checked', this.checked);
          });
      });
  </code></pre>
  
  <p>Now the checked status is show in a alert. But i can't checked the tbody tr checkbox.</p>