Tengo un código en un archivo .js que se usa en las casillas de verificación. Sin embargo, cuando se importa al html, las dos primeras secciones de la casilla de verificación funcionan (ubicación, pop) pero la última no. Cuando tengo el js en el html en lugar de importarlo, las tres secciones (ubicación, pop, matrícula) funcionan... ¡No estoy seguro de por qué o cómo solucionarlo! Perdón por la pregunta básica.

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'; } }); }

La tuition no cambia cuando se seleccionan las casillas de verificación.