通过复选框实现筛选功能需要使用 JavaScript 来实现。以下是一个html代码实现通过复选框筛选功能示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Filtering Example</title>
<script>
function filter() {
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
for (var j = 0; j < checkboxes.length; j++) {
if (items[i].classList.contains(checkboxes[j].value)) {
items[i].style.display = 'block';
}
}
}
}
</script>
<style>
.item {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div>
<label><input type="checkbox" value="red" onchange="filter()">Red</label>
<label><input type="checkbox" value="green" onchange="filter()">Green</label>
<label><input type="checkbox" value="blue" onchange="filter()">Blue</label>
</div>
<div class="item red">Red Item</div>
<div class="item green">Green Item</div>
<div class="item blue">Blue Item</div>
<div class="item red green">Red Green Item</div>
<div class="item red blue">Red Blue Item</div>
<div class="item green blue">Green Blue Item</div>
</body>
</html>
在这个例子中，有三个复选框用于选择颜色，还有六个 div 元素，每个元素都有一个 class 属性，表示该元素的颜色。
当用户勾选一个或多个复选框时，onchange 事件会触发 filter 函数。在 filter 函数中，首先获取所有已选中的复选框元素，然后遍历所有元素。如果该元素包含复选框的值（即该元素的 class 属性包含复选框的值），则将该元素的 display 属性设置为 'block'，否则将其设置为 'none'，以隐藏或显示该元素。
在本例中，选择 Red 和 Green 复选框后，只有 Red Item 和 Green Item 元素被显示出来，而其他元素则被隐藏。
评论