Check Uncheck all the checkboxes in a table

Question

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   Here is my 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

User · Answer

This will select and deselect all checkboxes:

function checkAll()
{
     var checkboxes = document.getElementsByTagName('input'), val = null;    
     for (var i = 0; i < checkboxes.length; i++)
     {
         if (checkboxes[i].type == 'checkbox')
         {
             if (val === null) val = checkboxes[i].checked;
             checkboxes[i].checked = val;
         }
     }
 }

Demo

Update:

You can use querySelectAll directly on the table to get the list of checkboxes instead of searching the whole document, but It might not be compatible with old browsers so you need to check that first:

 function checkAll()
 {
     var table = document.getElementById ('dataTable');
     var checkboxes = table.querySelectorAll ('input[type=checkbox]');
     var val = checkboxes[0].checked;
     for (var i = 0; i < checkboxes.length; i++) checkboxes[i].checked = val;
 }

Or to be more specific for the provided html structure in the OP question, this would be more efficient when selecting the checkboxes as it will access them directly instead of searching for them:

function checkAll (tableID)
{
    var table = document.getElementById (tableID);
    var val = table.rows[0].cells[0].children[0].checked;
    for (var i = 1; i < table.rows.length; i++)
    {
        table.rows[i].cells[0].children[0].checked = val;
    }
}

Demo

User · Answer

Try this          input type checkbox    prop  checked   true  uniform

User · Answer

Actually your checkAll     is hanging without any attachment   1  Add onchange event handler   lt th gt  lt INPUT type  checkbox  onchange  checkAll this   name  chk      gt   lt  th gt    2   Modified the code to handle check uncheck   function checkAll ele         var checkboxes   document getElementsByTagName  input         if  ele checked             for  var i   0  i  lt  checkboxes length  i                   if  checkboxes i  type     checkbox                      checkboxes i  checked   true                                   else            for  var i   0  i  lt  checkboxes length  i                   console log i               if  checkboxes i  type     checkbox                      checkboxes i  checked   false                                        Updated Fiddle

User · Answer

document  ready function                   var someObj                        checkAll   click function                          chk   prop  checked   this checked                                    chk   click function                           checkAll   prop  checked        chk checked   length        chk   length    true   false                                   input checkbox   change function                      debugger                   someObj elementChecked                           input checkbox   each function                          if    this  is   checked                              someObj elementChecked push   this  attr  id                                                                                               button   click function                      debugger                   alert someObj elementChecked                                      lt  script gt   lt  head gt    lt body gt        lt ul class  chkAry  gt           lt li gt  lt input type  checkbox  id  checkAll    gt Select All lt  li gt            lt li gt  lt input class  chk  type  checkbox  id  Delhi  gt Delhi lt  li gt            lt li gt  lt input class  chk  type  checkbox  id  Pune  gt Pune lt  li gt            lt li gt  lt input class  chk  type  checkbox  id  Goa  gt Goa lt  li gt            lt li gt  lt input class  chk  type  checkbox  id  Haryana  gt Haryana lt  li gt            lt li gt  lt input class  chk  type  checkbox  id  Mohali  gt Mohali lt  li gt        lt  ul gt       lt input type  button  id  button  value  Get    gt    lt  body gt

User · Answer

This solution is better because it is shorter and doesn t use a loop   id  checkAll  is the header column      checkAll   on  click   function             if  this checked    true                  userTable   find  input name  checkboxRow     prop  checked   true           else                 userTable   find  input name  checkboxRow     prop  checked   false

User · Answer

All CheckBox Checked      input type checkbox    prop  checked   true

User · Answer

JSBin  Add onClick event to checkbox where you want  like below    lt input type  checkbox  onClick  selectall this    gt Select All lt br  gt   lt input type  checkbox  name  foo  value  make  gt Make lt br  gt   lt input type  checkbox  name  foo  value  model  gt Model lt br  gt   lt input type  checkbox  name  foo  value  descr  gt Description lt br  gt   lt input type  checkbox  name  foo  value  startYr  gt Start Year lt br  gt   lt input type  checkbox  name  foo  value  endYr  gt End Year lt br  gt    In JavaScript you can write selectall function as   function selectall source      checkboxes   document getElementsByName  foo      for var i 0  n checkboxes length i lt n i          checkboxes i  checked   source checked

[javascript] Check/Uncheck all the checkboxes in a table

Update:

Examples related to javascript

Examples related to html

Examples related to dom