Why does my checkbox change-handling select or deselect all rows in every table instead of just the current one?

Question

I have multiple tables on a page. Each table, has a "check all" checkbox in the header. In the body, there is another checkbox for each row.

When the user checks each boy row, then a active class is applied and highlights the marked row, and the counter increases/decreases.

I have a problem with the check all function.

When the user selects the check all checkbox in the header, then it should select all the rows in just that one table. I can only get it to check all the rows across all the tables. Also the counter counts all the rows across all the tables, rather than just that one table.

Where am I going wrong?

Here is my code:

// https://gomakethings.com/a-vanilla-js-foreach-helper-method/
var forEach = function forEach(arr, callback) {
  Array.prototype.forEach.call(arr, callback);
};

var tableInputs = document.querySelectorAll('.table tbody td .form-check-input');
var tableSelectAll = document.querySelectorAll('.table thead th .form-check-input');
var count = document.querySelector('.output span')

forEach(tableInputs, function(element) {
  element.addEventListener('change', function() {
    // active class to make row blue
    if (element.checked) {
      element.parentNode.parentNode.classList.add('active');
    } else {
      element.parentNode.parentNode.classList.remove('active');
    }

    // set count to -
    var numberSelected = 0;

    // count number of checked
    for (var i = 0; i < tableInputs.length; i++) {
      if (tableInputs[i].checked == true) {
        numberSelected++;
      }
    }

    // display the count
    count.innerHTML = numberSelected;
  });
});

forEach(tableSelectAll, function(element) {
  element.addEventListener('change', function() {

    if (element.checked == true) {
      forEach(tableInputs, function(input) {
        input.parentNode.parentNode.classList.add('active');
        input.checked = true;

        // set count to -
        var numberSelected = 0;

        // count number of checked
        for (var i = 0; i < tableInputs.length; i++) {
          if (tableInputs[i].checked == true) {
            numberSelected++;
          }
        }

        // display the count
        count.innerHTML = numberSelected;
      });
    } else {
      forEach(tableInputs, function(input) {
        input.parentNode.parentNode.classList.remove('active');
        input.checked = false;
        count.innerHTML = 0;
      });
    }
  });
});

.form-check-input {
  border: solid 1px #000;
  position: relative;
}

tr.active {
  background-color: lightblue;
}

body { margin: 0; zoom: .88; }
p { margin: 0; }


  
    
      Table 1

      
        
          
            
            Request date
            Name
            Organisation/Employer
            Selected Course(s)
          
        
        
          
            
            10/10/2014
            Clark Kent
            Daily Planet
            Flight
          
          
            
            10/10/2014
            Hal Jordan
            Green Lantern Corps
            Lighting
          
          
            
            10/10/2014
            Arthur Curry
            Atlantis Water
            Aquatics
          
        
      

      Table 2
      
        
          
            
            Request date
            Name
            Organisation/Employer
            Selected Course(s)
          
        
        
          
            
            10/10/2014
            Barry Allen
            Star Labs
            Speed
          
          
            
            10/10/2014
            Bruce Wayne
            Wayne Enterprises
            Combat
          
        
      
    
  


Total selected: 0

Peter Seliger · Answer

Regardless of the approach one always should break down the problem into specific tasks which for the OP's requirements are ...

initialize a checkbox related change handling.
on any checkbox' state change do update all checkbox depended states.
do update the checkbox counter at init time and at checkbox state change time.
for any (initially) checked checkbox update its related table row state as well.

The techniques/tools are Event Delegation and the Selectors API

At any checkbox state change the handler inspects the event target whether it belongs to the current table's header or body.

Based on this check one either, for the first case, needs to check/uncheck all of a current table's body-related checkboxes or, according to the second case, one needs to update the state of the sole header-related checkbox.

Updating the checkbox counter is achieved by the correct selector and the queried node list's length value.

function updateCheckboxCounter() {
  document
    .querySelector('.output > span')
    .textContent = document
      .querySelectorAll('table.table tbody [type="checkbox"]:checked')
      .length;
}

function updateTableRowActiveState(checkboxNode) {
  checkboxNode
    .closest('tr')
    .classList
    .toggle('active', checkboxNode.checked);
}

function updateCheckboxDependedStates({ target }) {
  const tableNode = target.closest('table.table');

  if (target.matches('thead [type="checkbox"]')) {

    tableNode
      .querySelectorAll('tbody [type="checkbox"]')
      .forEach(elmNode => {

        elmNode.checked = target.checked;

        updateTableRowActiveState(elmNode);
      });

  } else if (target.matches('tbody [type="checkbox"]')) {

    tableNode
      .querySelector('thead [type="checkbox"]')
      .checked = Array
        .from(
          target
            .closest('tbody')
            .querySelectorAll('[type="checkbox"]')
        )
        .every(elmNode => elmNode.checked);

    updateTableRowActiveState(target);
  }
  updateCheckboxCounter();
}

function init() {
  document
    .querySelectorAll('table.table')
    .forEach(elmNode =>

      elmNode.addEventListener('change', updateCheckboxDependedStates)
    );
  document
    .querySelectorAll('table.table tbody [type="checkbox"]:checked')
    .forEach(updateTableRowActiveState);

  updateCheckboxCounter();
}
init();

.form-check-input {
  border: solid 1px #000;
  position: relative;
}
tr.active {
  background-color: lightblue;
}

body { margin: 0; zoom: .88; }
p { margin: 0; }


  
    

      Table 1

      
        
          
            
            Request date
            Name
            Organisation/Employer
            Selected Course(s)
          
        
        
          
            
            10/10/2014
            Clark Kent
            Daily Planet
            Flight
          
          
            
            10/10/2014
            Hal Jordan
            Green Lantern Corps
            Lighting
          
          
            
            10/10/2014
            Arthur Curry
            Atlantis Water
            Aquatics
          
        
      

      Table 2

      
        
          
            
            Request date
            Name
            Organisation/Employer
            Selected Course(s)
          
        
        
          
            
            10/10/2014
            Barry Allen
            Star Labs
            Speed
          
          
            
            10/10/2014
            Bruce Wayne
            Wayne Enterprises
            Combat
          
        
      

    
  


Total selected: 0

Why does my checkbox change-handling select or deselect all rows in every table instead of just the current one?

1 Answers