解决JavaScript多选Checkbox筛选无结果问题，实现多选项联合筛选

你的多选筛选失效，核心问题出在change函数的逻辑上：
每次循环选中的复选框时，你都会把results数组重新过滤一遍。比如先勾选红色，results变成所有红色元素；再勾选紫色时，代码会在已经过滤出的红色元素里找同时带紫色类的元素——显然没有这样的元素，最终results为空，自然没内容显示。

调整筛选逻辑：先收集所有选中的颜色标签，再判断元素是否包含任意一个选中的标签，符合条件就显示。同时修正选择器，避免误选其他.content下的元素。

修复后的JavaScript代码 #

class Object {
  constructor(color, shape, price) {
    this.color = color;
    this.shape = shape;
    this.price = price;
  }
}
const objects = [
  new Object("purple", "square", "$0"),
  new Object("purple", "circle", "$20"),
  new Object("red", "square", "$40"),
  new Object("red", "circle", "$0"),
  new Object("blue", "square", "$20"),
  new Object("blue", "circle", "$40"),
  new Object("purple", "square", "$60"),
  new Object("purple", "circle", "$80"),
  new Object("red", "square", "$100"),
  new Object("red", "circle", "$60"),
  new Object("blue", "square", "$80"),
  new Object("blue", "circle", "$100")
];

let text = "";
objects.forEach(objectLoop);
document.getElementById("content").innerHTML = text;

function objectLoop(obj) {
  text += `<p class="object ${obj.shape} ${obj.color}">${obj.price}</p>`;
}

// 修复后的筛选函数
function change() {
  // 精准选择内容区的p元素，避免误选filters里的content
  const allItems = Array.from(document.querySelectorAll("#content > p"));
  // 收集所有选中的颜色rel值
  const selectedColors = Array.from(document.querySelectorAll(".filters input[rel]:checked"))
    .map(input => input.getAttribute("rel"));

  // 先隐藏所有元素
  allItems.forEach(item => item.style.display = "none");

  // 如果没有选中任何颜色，显示所有元素
  if (selectedColors.length === 0) {
    allItems.forEach(item => item.style.display = "block");
    return;
  }

  // 显示包含任意选中颜色的元素
  allItems.forEach(item => {
    if (selectedColors.some(color => item.classList.contains(color))) {
      item.style.display = "block";
    }
  });
}

// 给重置按钮添加事件
document.querySelector(".filters button").addEventListener("click", () => {
  // 取消所有复选框选中状态
  document.querySelectorAll(".filters input[rel]").forEach(input => input.checked = false);
  change();
});

change();

补充说明 #

• 去掉了原代码中不必要的全局变量object1到object12，直接在数组里创建实例，避免污染全局作用域。
• 用模板字符串替代了字符串拼接，代码更简洁易读。
• 给重置按钮添加了功能，点击后清空所有筛选并显示全部内容。
• 修正了选择器，用#content > p精准定位要筛选的元素，避免和filters里的.content混淆。

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