CMS Filter - Checkbox - Uncheck "All" when others are checked

Attributes
1

Hi,

I’m using the CMS filter with a few collections in one of our pages, one of the elements to filter is using Checkboxes where I have the option for “All” that starts selected.

Is it possible to “uncheck” the “All” if any other checkbox is selected?

Thanks

2

Hey @info6! This can be done with some JS like this

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Select all the checkboxes with the class 'filter-checkbox'
    const checkboxes = document.querySelectorAll('.filter-checkbox');

    // Add an event listener to each checkbox
    checkboxes.forEach((checkbox) => {
      checkbox.addEventListener('change', () => {
        // Check if the clicked checkbox is the 'All' checkbox
        if (checkbox.value === 'all') {
          // If the 'All' checkbox is clicked and checked, uncheck all other checkboxes
          if (checkbox.checked) {
            checkboxes.forEach((item) => {
              if (item !== checkbox) {
                item.checked = false;
              }
            });
          }
        } else {
          // If any other checkbox is clicked and checked, uncheck the 'All' checkbox
          if (checkbox.checked) {
            checkboxes.forEach((item) => {
              if (item.value === 'all') {
                item.checked = false;
              }
            });
          }
        }
      });
    });
  });
</script>

Please test and let me know if you need any help!