I have some code in a .js file that is used in checkboxes. When imported into the html, though, the first two checkbox sections work (location, pop) but the last one does not. When I have the js in the html instead of importing it, all three sections (location, pop, tuition) work... I'm not sure why this is or how to fix it! Sorry for the basic question.

HTML:

    <script src="checkbox.js"></script>

JS:

var allCheckboxes = document.querySelectorAll('input[type=checkbox]');
var allPlayers = Array.from(document.querySelectorAll('.school'));
var checked = {};

getChecked('pop');
getChecked('location');
getChecked('tuition');

Array.prototype.forEach.call(allCheckboxes, function (el) {
  el.addEventListener('change', toggleCheckbox);
});

function toggleCheckbox(e) {
  getChecked(e.target.name);
  setVisibility();
}

function getChecked(name) {
  checked[name] = Array.from(document.querySelectorAll('input[name=' + name + ']:checked')).map(function (el) {
    return el.value;
  });
}

function setVisibility() {
  allPlayers.map(function (el) {
    var pop = checked.pop.length ? _.intersection(Array.from(el.classList), checked.pop).length : true;
    var location = checked.location.length ? _.intersection(Array.from(el.classList), checked.location).length : true;
    var tuition = checked.tuition.length ? _.intersection(Array.from(el.classList), checked.tuition).length : true;
    if (pop && location && tuition) {
      el.style.display = 'block';
    } else {
      el.style.display = 'none';
    }
  });
}

The tuition does not change when checkboxes are selected.