用php或JavaScript，做类似爱奇艺的电影筛选板块，多层多标签实时筛选对应的项目，注意我要的是点选标签时要实时的筛选出对应的项目，请帮我编写简单的模板

好的，以下是一个简单的模板供参考：

HTML 部分：

<div class="filter-container">
  <div class="filter-group">
    <h4 class="filter-title">类型：</h4>
    <div class="filter-options">
      <label><input type="checkbox" name="type" value="action"> 动作</label>
      <label><input type="checkbox" name="type" value="comedy"> 喜剧</label>
      <label><input type="checkbox" name="type" value="drama"> 剧情</label>
    </div>
  </div>
  <div class="filter-group">
    <h4 class="filter-title">地区：</h4>
    <div class="filter-options">
      <label><input type="checkbox" name="region" value="china"> 中国</label>
      <label><input type="checkbox" name="region" value="us"> 美国</label>
      <label><input type="checkbox" name="region" value="japan"> 日本</label>
    </div>
  </div>
  <div class="filter-group">
    <h4 class="filter-title">年代：</h4>
    <div class="filter-options">
      <label><input type="checkbox" name="year" value="2010s"> 2010年代</label>
      <label><input type="checkbox" name="year" value="2000s"> 2000年代</label>
      <label><input type="checkbox" name="year" value="90s"> 90年代</label>
    </div>
  </div>
</div>

<div class="movie-container">
  <!-- 电影列表 -->
</div>

CSS 部分：

.filter-container {
  display: flex;
  margin-bottom: 20px;
}

.filter-group {
  margin-right: 20px;
}

.filter-title {
  margin: 0;
  margin-bottom: 5px;
}

.filter-options {
  margin: 0;
}

.movie-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.movie-item {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

JavaScript 部分：

const filters = document.querySelectorAll('.filter-options input[type="checkbox"]');
const movieContainer = document.querySelector('.movie-container');

const movies = [
  { title: '速度与激情', type: 'action', region: 'us', year: '2000s' },
  { title: '肖申克的救赎', type: 'drama', region: 'us', year: '90s' },
  { title: '功夫', type: 'comedy', region: 'china', year: '2000s' },
  { title: '千与千寻', type: 'drama', region: 'japan', year: '90s' },
  { title: '黑客帝国', type: 'action', region: 'us', year: '90s' },
  { title: '让子弹飞', type: 'comedy', region: 'china', year: '2010s' },
  { title: '阿甘正传', type: 'drama', region: 'us', year: '90s' },
  { title: '疯狂的石头', type: 'comedy', region: 'china', year: '2000s' },
  { title: '指环王', type: 'drama', region: 'us', year: '2000s' },
  { title: '海上钢琴师', type: 'drama', region: 'italy', year: '90s' },
];

function renderMovies(movies) {
  let html = '';
  movies.forEach(movie => {
    html += `<div class="movie-item">${movie.title}</div>`;
  });
  movieContainer.innerHTML = html;
}

function filterMovies() {
  const typeFilters = Array.from(document.querySelectorAll('input[name="type"]:checked')).map(input => input.value);
  const regionFilters = Array.from(document.querySelectorAll('input[name="region"]:checked')).map(input => input.value);
  const yearFilters = Array.from(document.querySelectorAll('input[name="year"]:checked')).map(input => input.value);

  let filteredMovies = movies.filter(movie => {
    if (typeFilters.length > 0 && !typeFilters.includes(movie.type)) {
      return false;
    }
    if (regionFilters.length > 0 && !regionFilters.includes(movie.region)) {
      return false;
    }
    if (yearFilters.length > 0 && !yearFilters.includes(movie.year)) {
      return false;
    }
    return true;
  });

  renderMovies(filteredMovies);
}

filters.forEach(filter => {
  filter.addEventListener('change', filterMovies);
});

renderMovies(movies);

注意，这只是一个简单的模板，仅供参考。在实际应用中，您需要根据自己的需求进行相应的修改和扩展。