如何使用复选框创建帖子类别过滤器？

<div id="category-filter">
  <input type="checkbox" id="category1">
  <label for="category1">类别1</label>

  <input type="checkbox" id="category2">
  <label for="category2">类别2</label>

  <!-- 其他类别复选框 -->
</div>

// 获取所有复选框元素
const checkboxes = document.querySelectorAll('#category-filter input[type="checkbox"]');

// 监听复选框变化事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', filterPosts);
});

// 过滤帖子函数
function filterPosts() {
  // 获取选中的复选框值
  const selectedCategories = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.id);

  // 根据选中的类别过滤帖子
  const filteredPosts = posts.filter(post => selectedCategories.includes(post.category));

  // 更新帖子列表显示
  renderPosts(filteredPosts);
}

#category-filter {
  margin-bottom: 10px;
}

#category-filter input[type="checkbox"] {
  margin-right: 5px;
}

.post {
  /* 帖子样式 */
}