求助：基于jQuery的复选框联动Div过滤功能无法正常运行

我来帮你排查并修复这个过滤功能的问题，你的代码里有几个关键问题导致功能不正常：

问题分析 #

• 重复的ID：HTML里第三个复选框的id错误地写成了2014，和第二个重复了。ID必须是唯一的，这会导致点击第三个复选框时无法正确关联到对应的元素，应该改成2015。
• 选择器错误：你写的$('.result .' + id + '')是在找.result内部的子元素，但实际目标元素本身同时拥有.result和年份类（比如2013），正确的选择器应该是$('.result.' + id)（两个类直接连在一起，代表同时拥有这两个类的元素）。
• 逻辑不完整：当前代码只处理了复选框勾选的情况，没有处理取消勾选的场景，而且当多个复选框被勾选时，需要显示所有符合条件的元素，而不是只切换单个元素的显示状态。

修正后的完整代码 #

HTML部分（修复重复ID） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <input type="checkbox" id="2013" name="2013"><label for="2013">2013</label>
  <input type="checkbox" id="2014" name="2014"><label for="2014">2014</label>
  <input type="checkbox" id="2015" name="2015"><label for="2015">2015</label>
</div>
<div class="results">
  <div class="result 2013">2013年内容</div>
  <div class="result 2014">2014年内容</div>
  <div class="result 2015">2015年内容</div>
</div>

jQuery部分（修复选择器和完善逻辑） #

// 初始状态：隐藏所有结果
$('.result').hide();

$(".filters :checkbox").click(function() {
  // 获取所有被勾选的复选框的ID
  var checkedYears = $(".filters :checkbox:checked").map(function() {
    return this.id;
  }).get();

  // 先隐藏所有结果
  $('.result').hide();

  // 如果有勾选的年份，显示对应的元素
  if (checkedYears.length > 0) {
    // 拼接选择器，比如 ".result.2013, .result.2014"
    var selector = checkedYears.map(year => '.result.' + year).join(', ');
    $(selector).slideDown('slow');
  }
});

额外优化建议 #

• 数字开头的类名虽然在HTML5中允许，但在CSS选择器中处理起来可能有潜在问题，建议给年份类加个前缀，比如year-2013，这样代码更规范，也避免意外问题。
• 如果希望默认显示所有内容，只在勾选时过滤，可以把初始的$('.result').hide();改成$('.result').show();，然后调整逻辑：当没有勾选框时显示全部，有勾选时只显示对应内容。

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