title: Check/Uncheck all the checkboxes in a table
body: <p>I have a table with information. The first column of the table have checkboxes.
  I can add/delete rows with a button by checking the checkboxes. The problem I have now is how do I select or deselect all the checkboxes using the checkbox on the header.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;HTML&gt;
    &lt;HEAD&gt;
      &lt;TITLE&gt; Add/Remove dynamic rows in HTML table &lt;/TITLE&gt;
      &lt;SCRIPT language="javascript"&gt;
        function addRow(tableID) {
  
          var table = document.getElementById(tableID);
  
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
  
          var cell1 = row.insertCell(0);
          var element1 = document.createElement("input");
          element1.type = "checkbox";
          element1.name="chkbox[]";
          cell1.appendChild(element1);
  
          var cell2 = row.insertCell(1);
          cell2.innerHTML = rowCount;
  
          var cell3 = row.insertCell(2);
          cell3.innerHTML = rowCount;
  
          var cell4 = row.insertCell(3);
          cell4.innerHTML = rowCount;
  
          var cell5 = row.insertCell(4);
          cell5.innerHTML = rowCount;
  
          var cell6 = row.insertCell(5);
          cell6.innerHTML = rowCount;
        }
  
        function deleteRow(tableID) {
          try {
          var table = document.getElementById(tableID);
          var rowCount = table.rows.length;
  
          for(var i=1; i&lt;rowCount; i++) {
              var row = table.rows[i];
              var chkbox = row.cells[0].childNodes[0];
              if(null != chkbox &amp;&amp; true == chkbox.checked) {
                  table.deleteRow(i);
                  rowCount--;
                  i--;
              }
          }
          }catch(e) {
              alert(e);
          }
        }
  
        function checkAll(formname, checktoggle)
        {
          var checkboxes = new Array();
          checkboxes = document[formname].getElementsByTagName('input');
  
          for (var i=0; i&lt;checkboxes.length; i++)  {
              if (checkboxes[i].type == 'checkbox')   {
              checkboxes[i].checked = checktoggle;
              }
          }
        }
  
      &lt;/SCRIPT&gt;
    &lt;/HEAD&gt;
    &lt;BODY&gt;
  
      &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt;
  
      &lt;INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt;
  
      &lt;TABLE id="dataTable" border="1"&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;INPUT type="checkbox" name="chk[]"/&gt;&lt;/th&gt;
          &lt;th&gt;Make&lt;/th&gt;
          &lt;th&gt;Model&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Start Year&lt;/th&gt;
          &lt;th&gt;End Year&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/TABLE&gt;
    &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>