Untitled

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