JavaScript: Trigger a Collective Event when "Select All" is Checked

Question

I'm new to stack overflow and had a question about event triggers in JavaScript.

I have a code set up so that when a checkbox is checked it gets put into a row based on its value. Odds in row-1 and evens in row-2.

On an individual click the value gets put into the correct row, but when I check the "Select All" checkbox none of the checked values get populated into the table.

How can I trigger an event that when the "Select All" checkbox is checked, the checked values get pushed into the assigned row at the same time (similar to the individual check)? Also, when the "Select All" checkbox is unchecked how can all these values be removed from these rows.

I've provided the code in the snippet to provide a visual to the issue described above.

**Please ignore the css, it was purely added to make the table look "not as ugly" :)

const oddRow = document.querySelector('.odd-row')
const evenRow = document.querySelector('.even-row')

const odds = Array.from(document.querySelectorAll('.odd'));
const evens = Array.from(document.querySelectorAll('.even'));

let oddValues = [];
let evenValues = [];

const number = function(e, number, row) {
  if(e.target.checked) number.push(e.target.value)
  else number.splice(number.indexOf(e.target.value), 1);
  row.innerHTML = number.join(', ');
} 

odds.forEach(function (sample) {
  sample.addEventListener('change', (e) => number (e, oddValues, oddRow))
})

evens.forEach(function (sample) {
  sample.addEventListener('change', (e) => number (e, evenValues, evenRow))
})

// Select all checkbox
const selectAll = document.querySelector('.select-all')
const valueCheckboxes = document.querySelectorAll('.value')

function selectAllFun() {
  selectAll.addEventListener("change", (e) => {
    for (let i = 0; i < valueCheckboxes.length; i++) {
      let values = [];
      valueCheckboxes[i].checked = e.target.checked;
      }
    }
  )}

selectAllFun()

td, th {
    border: 1px solid rgb(153, 145, 145);
    padding: 10px;
    font-size: 14px;
    color: #555;
}

table {
  width: 20%;
  border-collapse: collapse;
    table-layout: fixed;
}

1
2
3
4
5
6






Select all









  
  
   Odds
    Evens

user_5648954 · Answer

Currently, you're updating the checked property, which doesn't cause your change event to execute on your checkboxes. You can manually trigger the change event on your elements though by using .dispatchEvent() to fire the change event on your checkboxes, which will then cause the change event listener to execute the appropriate logic:

valueCheckboxes[i].dispatchEvent(new Event("change")); // trigger the change event listeners on current checkbox

const oddRow = document.querySelector('.odd-row')
const evenRow = document.querySelector('.even-row')

const odds = Array.from(document.querySelectorAll('.odd'));
const evens = Array.from(document.querySelectorAll('.even'));

let oddValues = [];
let evenValues = [];

const number = function(e, number, row) {
  if (e.target.checked) number.push(e.target.value)
  else number.splice(number.indexOf(e.target.value), 1);
  row.innerHTML = number.join(', ');
}

odds.forEach(function(sample) {
  sample.addEventListener('change', (e) => number(e, oddValues, oddRow))
})

evens.forEach(function(sample) {
  sample.addEventListener('change', (e) => number(e, evenValues, evenRow))
})

// Select all checkbox
const selectAll = document.querySelector('.select-all')
const valueCheckboxes = document.querySelectorAll('.value')

function selectAllFun() {
  selectAll.addEventListener("change", (e) => {
    for (let i = 0; i < valueCheckboxes.length; i++) {
      let values = [];
      valueCheckboxes[i].checked = e.target.checked;
      valueCheckboxes[i].dispatchEvent(new Event("change")); // trigger the event listeners
    }
  })
}

selectAllFun()

td,
th {
  border: 1px solid rgb(153, 145, 145);
  padding: 10px;
  font-size: 14px;
  color: #555;
}

table {
  width: 20%;
  border-collapse: collapse;
  table-layout: fixed;
}

1
2
3
4
5
6






Select all










  
    Odds
    Evens

JavaScript: Trigger a Collective Event when "Select All" is Checked

1 Answers