如何使用checkbox结合data-category属性实现多分类产品筛选

你可以通过原生JavaScript实现需求，具体逻辑和代码如下：

核心逻辑 #

• 为所有分类checkbox绑定状态变更监听事件
• 每次状态变更时，先收集所有已勾选的分类值
• 遍历所有产品项，将产品的data-category属性拆分为分类数组
• 匹配规则：无勾选时显示全部产品；有勾选时，只要产品分类包含任意一个已勾选值就显示，否则隐藏

完整代码 #

<div class="container">
  <h3 style="font-size:14px; font-weight:normal;">Products by Room</h3>
  <p style="font-size:12px;"><strong>Filter items by room:</strong></p>
  <form>
    <label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br>
    <label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br>
    <label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br>
    <label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br>
    <label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br>
    <label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label>
  </form>

  <div class="products-by-room">
    <div data-category="office library">Office, Library</div>
    <div data-category="office">Office</div>
    <div data-category="hallway library">Hallway, Library</div>
    <div data-category="living-room dining-room">Living-room & Dining-room</div>
    <div data-category="living-room">Living-room</div>
    <div data-category="bedroom dining-room">Bedroom & Dining-room</div>
    <!-- 注意：原属性值为dining room，和checkbox的value dining-room不匹配，已修正 -->
    <div data-category="dining-room">Dining room</div>
    <div data-category="office">Office</div>
    <div data-category="bedroom">Bedroom</div>
    <div data-category="living-room">Living-room</div>
    <div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
    <div data-category="library">Library</div>
    <div data-category="office">Office</div>
    <div data-category="bedroom">Bedroom</div>
  </div>
</div>

<script>
// 获取所有分类checkbox
const checkboxes = document.querySelectorAll('input[name="room"]');
// 获取所有产品项
const productItems = document.querySelectorAll('.products-by-room div');

// 绑定筛选事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', filterProducts);
});

function filterProducts() {
  // 收集已勾选的分类值
  const checkedCates = Array.from(checkboxes)
    .filter(cb => cb.checked)
    .map(cb => cb.value);
  
  productItems.forEach(item => {
    // 拆分当前产品的所有分类
    const itemCates = item.dataset.category.split(' ');
    // 判断是否需要显示
    const isShow = checkedCates.length === 0 ? true : itemCates.some(cate => checkedCates.includes(cate));
    item.style.display = isShow ? 'block' : 'none';
  });
}
</script>

注意事项 #

你原有代码中<div data-category="dining room">Dining room</div>的分类值为dining room，和对应checkbox的value="dining-room"不统一，会导致筛选时匹配失败，上述代码中已经做了修正。

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