Untitled
unknown
javascript
2 years ago
1.7 kB
5
Indexable
// Get all the checkbox inputs const checkboxes = document.querySelectorAll('#filter-options input[type=checkbox]'); // Add event listeners to each checkbox checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { filterDogs(); }); }); function filterDogs() { // Get all the checked checkbox values const checkedBreeds = Array.from(document.querySelectorAll('input[name=breed]:checked')).map(function(breedCheckbox) { return breedCheckbox.value; }); const checkedGenders = Array.from(document.querySelectorAll('input[name=gender]:checked')).map(function(genderCheckbox) { return genderCheckbox.value; }); const checkedAges = Array.from(document.querySelectorAll('input[name=age]:checked')).map(function(ageCheckbox) { return ageCheckbox.value; }); // Show all dogs by default const dogs = document.querySelectorAll('.dog'); dogs.forEach(function(dog) { dog.style.display = 'block'; }); // Loop through the checked checkbox values and hide dogs that don't match if (checkedBreeds.length > 0) { dogs.forEach(function(dog) { if (!checkedBreeds.includes(dog.getAttribute('data-breed'))) { dog.style.display = 'none'; } }); } if (checkedGenders.length > 0) { dogs.forEach(function(dog) { if (!checkedGenders.includes(dog.getAttribute('data-gender'))) { dog.style.display = 'none'; } }); } if (checkedAges.length > 0) { dogs.forEach(function(dog) { if (!checkedAges.includes(dog.getAttribute('data-age'))) { dog.style.display = 'none'; } }); } }
Editor is loading...