javascript select all checkboxes in table Example

Today, We want to share with you javascript select all checkboxes.In this post we will show you check all checkbox inside a div javascript, hear for check all checkbox inside a div javascript we will give you demo and example for implement.In this post, we will learn about jquery select all checkboxes in table column with an example.

Check All Checkboxes With Pure JavaScript

index.html

<HTML>
  <HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table - www.pakainfo.com</TITLE>
    <SCRIPT language="javascript">
 function addRow(dynamic_tbl_data_id) {

     var table = document.getElementById(dynamic_tbl_data_id);

     var totalRowInfo = table.rows.length;
     var row = table.insertRow(totalRowInfo);

     var collumn1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "checkbox";
     element1.name = "chkbox[]";
     collumn1.appendChild(element1);

     var collumn2 = row.insertCell(1);
     collumn2.innerHTML = totalRowInfo;

     var collumn3 = row.insertCell(2);
     collumn3.innerHTML = totalRowInfo;

     var collumn4 = row.insertCell(3);
     collumn4.innerHTML = totalRowInfo;

     var collumn5 = row.insertCell(4);
     collumn5.innerHTML = totalRowInfo;

     var collumn6 = row.insertCell(5);
     collumn6.innerHTML = totalRowInfo;
 }

 function deleteRow(dynamic_tbl_data_id) {
     try {
         var table = document.getElementById(dynamic_tbl_data_id);
         var totalRowInfo = table.rows.length;

         for (var i = 1; i < totalRowInfo; i++) {
             var row = table.rows[i];
             var chkbox = row.collumns[0].childNodes[0];
             if (null != chkbox && true == chkbox.checked) {
                 table.deleteRow(i);
                 totalRowInfo--;
                 i--;
             }
         }
     } catch (e) {
         alert(e);
     }
 }

 function checkAll(ele) {
     var allChkBoxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < allChkBoxes.length; i++) {
             if (allChkBoxes[i].type == 'checkbox') {
                 allChkBoxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < allChkBoxes.length; i++) {
             console.log(i)
             if (allChkBoxes[i].type == 'checkbox') {
                 allChkBoxes[i].checked = false;
             }
         }
     }
 }

    </SCRIPT>
  </HEAD>
  <BODY>

 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" border="1">
    <tr>
        <th>
            <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" />
        </th>
        <th>Created</th>
        <th>Version No</th>
        <th>Information</th>
        <th>Created Year</th>
        <th>Expiry Year</th>
    </tr>
</TABLE>

  </BODY>
  </HTML>

I hope you get an idea about select all checkbox javascript example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.