JavaScript多条件过滤：实现基于AND/OR逻辑的动态产品筛选

<div class="filterable" data-colors="blue large">Product A</div>
<div class="filterable" data-colors="green small">Product B</div>

<div>
  <h3>颜色</h3>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="red">红色</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="green">绿色</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="blue">蓝色</label>
</div>
<div>
  <h3>尺寸</h3>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="small">小</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="medium">中</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="large">大</label>
</div>
<div>
  <h1>筛选结果</h1>
  <div class="filterable" data-colors="blue large">产品 A</div>
  <div class="filterable" data-colors="green small">产品 B</div>
  <div class="filterable" data-colors="red medium">产品 C</div>
  <div class="filterable" data-colors="red large">产品 D</div>
</div>

// 获取所有筛选复选框
const filterCheckboxes = document.querySelectorAll('.filter-checkbox');
// 获取颜色筛选复选框
const colorCheckboxes = document.querySelectorAll('.color-checkbox');
// 获取尺寸筛选复选框
const sizeCheckboxes = document.querySelectorAll('.size-checkbox');
// 获取所有可筛选的产品元素
const filterables = document.querySelectorAll('.filterable');

/**
 * 更新筛选结果的函数。
 * 根据用户选择的复选框状态，动态显示或隐藏产品。
 */
function updateFilter() {
  // 获取所有选中的颜色值
  const colorChecked = Array.from(colorCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 获取所有选中的尺寸值
  const sizeChecked = Array.from(sizeCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 如果没有任何筛选条件被选中，则显示所有产品并退出
  if (!(colorChecked.length > 0 || sizeChecked.length > 0)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return;
  }

  // 遍历每个可筛选的产品元素
  filterables.forEach(filterable => {
    // 从data-colors属性中解析出产品的颜色和尺寸
    // 假设格式为 "color value_size value"
    const itemAttributes = filterable.dataset.colors.split(' ');
    const itemColor = itemAttributes[0];
    const itemSize = itemAttributes[1];

    let shouldDisplay = false; // 标记产品是否应该显示

    // 情况1: 颜色和尺寸筛选器都有选中项 (应用AND逻辑)
    if (colorChecked.length > 0 && sizeChecked.length > 0) {
      // 产品必须同时匹配选中的颜色和选中的尺寸
      shouldDisplay = colorChecked.includes(itemColor) && sizeChecked.includes(itemSize);
    }
    // 情况2: 只有颜色筛选器有选中项 (应用OR逻辑 within colors)
    else if (colorChecked.length > 0) {
      // 产品必须匹配任何一个选中的颜色
      shouldDisplay = colorChecked.includes(itemColor);
    }
    // 情况3: 只有尺寸筛选器有选中项 (应用OR逻辑 within sizes)
    else if (sizeChecked.length > 0) {
      // 产品必须匹配任何一个选中的尺寸
      shouldDisplay = sizeChecked.includes(itemSize);
    }
    // 注意: 没有筛选条件的情况已在函数开头处理

    // 根据shouldDisplay的值来设置产品的显示状态
    filterable.style.display = shouldDisplay ? 'block' : 'none';
  });
}

// 为所有筛选复选框添加change事件监听器
filterCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateFilter);
});

// 页面加载时执行一次筛选，以反映默认状态
updateFilter();