First, let's break down the limitation of your original script: it processes each checkbox independently, which means checking multiple boxes will overwrite each other's display changes (e.g., checking Canada then China would hide Canada elements). To support multi-dimensional filtering where elements need to match combinations of filters (like "Canada AND Programming" or "China OR India AND Design"), we need to completely rewrite the logic to evaluate each element against all selected filters at once.

Step 1: Update the HTML Structure #

Add a data-category attribute to each checkbox to group filters by their dimension (e.g., country, job type). This lets us handle OR logic within a category and AND logic across categories. Also, update your result elements to include multiple classes for each filter they match:

<div class="filter">
  <!-- Country Filters -->
  <div class="checkbox">
    <label><input type="checkbox" rel="canada" data-category="country" onchange="change()"/>Canada</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="china" data-category="country" onchange="change()"/>China</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="india" data-category="country" onchange="change()"/>India</label>
  </div>

  <!-- Job Type Filters -->
  <div class="checkbox">
    <label><input type="checkbox" rel="programming" data-category="job" onchange="change()"/>Programming</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="design" data-category="job" onchange="change()"/>Design</label>
  </div>
</div>

<div class="result">
  <div class="canada programming">
    <h1>Canada</h1>
    <h2>Jason (Programmer)</h2>
  </div>
  <div class="china design">
    <h1>China</h1>
    <h2>Ni (Designer)</h2>
  </div>
  <div class="india programming">
    <h1>India</h1>
    <h2>Raj (Programmer)</h2>
  </div>
  <div class="canada design">
    <h1>Canada</h1>
    <h2>Sarah (Designer)</h2>
  </div>
</div>

Step 2: Rewrite the JavaScript Filter Logic #

The new script will:

1. Collect all checked checkboxes and group them by their category.
2. For each result element, check if it meets the criteria for every selected category (OR within a category, AND across categories).
3. Toggle visibility based on whether the element matches all selected filter conditions.

function change() {
  // Get all checked checkboxes
  const checkedCheckboxes = Array.from(document.querySelectorAll('.checkbox input:checked'));
  
  // Group selected filters by their category (e.g., country, job)
  const filterGroups = {};
  checkedCheckboxes.forEach(input => {
    const category = input.dataset.category;
    const filterValue = input.getAttribute('rel');
    
    if (!filterGroups[category]) {
      filterGroups[category] = [];
    }
    filterGroups[category].push(filterValue);
  });
  
  // Get all result elements to evaluate
  const resultElements = Array.from(document.querySelectorAll('.result > div'));
  
  // Determine visibility for each element
  resultElements.forEach(element => {
    let shouldShow = true;
    
    // Check each category with selected filters
    for (const [category, filters] of Object.entries(filterGroups)) {
      // Element must match at least one filter in this category
      const matchesCategory = filters.some(filter => element.classList.contains(filter));
      if (!matchesCategory) {
        shouldShow = false;
        break; // No need to check other categories if one fails
      }
    }
    
    // Show all elements if no filters are selected
    if (Object.keys(filterGroups).length === 0) {
      shouldShow = true;
    }
    
    // Apply visibility
    element.style.display = shouldShow ? 'block' : 'none';
  });
}

// Initialize filter state on page load
change();

How This Works #

• OR Logic Within a Category: If you check multiple boxes in the same category (e.g., Canada and India), elements matching either will be shown.
• AND Logic Across Categories: If you check boxes from different categories (e.g., Canada and Programming), only elements matching both will be shown.
• No Filters Selected: All elements are displayed by default, just like your original script.

Optional Improvements #

For better maintainability, you could:

• Use CSS classes (like hidden) instead of directly modifying style.display (add .hidden { display: none; } to your stylesheet, then toggle the class with element.classList.toggle('hidden', !shouldShow)).
• Add debouncing if you expect a large number of elements (to prevent excessive re-renders during rapid checkbox clicks).

内容的提问来源于stack exchange，提问作者Shyngys Rakhad