如何使用复选框正确过滤数据？

复选框（Checkbox）是一种常见的用户界面元素，允许用户从多个选项中选择一个或多个选项。在前端开发中，复选框常用于过滤数据，以便用户可以根据自己的需求查看特定的数据集。以下是如何使用复选框正确过滤数据的基础概念和相关步骤：

基础概念

复选框：一种用户界面元素，允许用户选择一个或多个选项。
数据过滤：根据用户的选择，动态显示或隐藏数据。
事件监听：监听复选框的状态变化，并根据变化执行相应的操作。

类型

单选复选框：通常用于互斥选项，但可以通过逻辑实现单选效果。
多选复选框：允许用户选择多个选项。

应用场景

电商网站：按类别、价格区间、品牌等过滤商品。
数据分析工具：按时间范围、数据类型等过滤数据。
任务管理工具：按优先级、状态等过滤任务。

示例代码

以下是一个简单的HTML和JavaScript示例，展示如何使用复选框过滤数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter Data with Checkboxes</title>
    <style>
        .hidden { display: none; }
    </style>
</head>
<body>
    <h1>Filter Data</h1>
    <label><input type="checkbox" id="option1"> Option 1</label>
    <label><input type="checkbox" id="option2"> Option 2</label>
    <label><input type="checkbox" id="option3"> Option 3</label>

    <ul id="dataList">
        <li class="item option1">Item 1 (Option 1)</li>
        <li class="item option2">Item 2 (Option 2)</li>
        <li class="item option1 option3">Item 3 (Option 1, Option 3)</li>
        <li class="item option2 option3">Item 4 (Option 2, Option 3)</li>
    </ul>

    <script>
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const selectedOptions = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.id);
                const items = document.querySelectorAll('.item');

                items.forEach(item => {
                    const itemOptions = Array.from(item.classList).filter(cls => cls.startsWith('option'));
                    const isVisible = selectedOptions.some(option => itemOptions.includes(option));
                    item.classList.toggle('hidden', !isVisible);
                });
            });
        });
    </script>
</body>
</html>