Checkbox Check Event Listener

Checking one vs checking all

In handling multiple checkboxes, efficiency and scalability come to the fore:

// Select checkboxes, then listen to their changes, like a good eavesdropper!
document.querySelectorAll('input[type=checkbox]').forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    console.log(`Checkbox ${checkbox.name} checked status: ${checkbox.checked ? 'yes' : 'no'}`);
    // If 'no', well, better luck next time, checkbox!
  });
});


Here, we:

1. Select all checkboxes using document.querySelectorAll
2. Iterate over our selections via Array.forEach
3. Listen to each checkbox's 'change' event

Oldie but goodie: Legacy browsers

Working with older browsers like IE11 requires care. They might not support direct Array method application on a NodeList, hence a polyfill or Array.from comes in handy:

Array.from(document.querySelectorAll('input[type=checkbox]')).forEach(function(checkbox) {
  // ... add event listeners
});


We use Array.from() to convert our NodeList into a standard JavaScript array. It makes the checkboxes more pliable to array operations like a good yoga master.

Extracting the checked

To extract values from checked boxes, one can leverage Array.filter and Array.map:

let checkedValues = Array.from(document.querySelectorAll('input[type=checkbox]:checked')).map(checkbox => checkbox.value);
// checkedValues now holds the role of the chosen ones. Praise be!


Advanced handling

Playing by the rules

If you're building a Chrome plugin or working within constraints (like a finicky website that dislikes code alterations), your event logic must work within these boundaries, all the while harnessing the powers of the Chrome API:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.message === 'addCheckboxListeners') {
    addCheckboxEventListeners();
    // Hear ye, hear ye, event listeners have arrived!
  }
});

function addCheckboxEventListeners() {
  let checkboxes = document.querySelectorAll('input[type=checkbox]');
  checkboxes.forEach(function(checkbox) {
    checkbox.removeEventListener('change', checkboxChangeListener);
    checkbox.addEventListener('change', checkboxChangeListener);
    // "I'm back", Arnold Schwarzenegger style!
  });
}

function checkboxChangeListener(event) {
  let checkbox = event.target;
  console.log(`Checkbox ${checkbox.name} ${checkbox.checked ? 'is checked. Yay!' : 'is unchecked. Nay!'}`);
  // Following checkbox politics as usual!
}


Event inception

The checkbox state influences the actions within the 'change' event listener. Let's play God:

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function(event) {
    if(event.target.checked) {
      console.log(`${checkbox.name} has gained the checked status. Party!`);
      // It's raining checks! Hallelujah!
    } else {
      console.log(`${checkbox.name} has been unchecked. Sigh!`);
      // Returns to the unchecked underworld
    }
  });
});


Note the focus on e.target.checked for conditional guidance.

Show, don't tell

Complement your code with an online sandbox like JSFIDDLE for practicable examples. console.log, the debugging superhero, provides real-time feedback & debugging prowess:

checkbox.addEventListener('change', function() {
  console.log('The checkbox state:', this.checked);
});


Look inside your console. The truth about your event logic resides there!