Add listener to all

by Leo Cavalcante

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>

CSS

.custom-checkbox.checked {
  background: green;
}

JavaScript

const checks = document.querySelectorAll('.custom-checkbox');

function handleCheckClick(event) {
  const check = event.currentTarget;
  const checkInput = check.querySelector('input');

  if (checkInput.checked) {
    check.classList.add('checked');
  } else {
    check.classList.remove('checked')
  }
}

Array.from(checks).forEach(check => check.addEventListener('click', handleCheckClick));