我对编码是全新的，不知道我在做什么。我觉得我也不太擅长解释事情，所以如果这篇文章有点难以理解，我很抱歉。希望查看代码本身更有意义。

基本上，我有一个可以过滤的列表。每个列表项包含多个类。我还有复选框来显示每个单独的类。

但是，有两个类在它们所应用的列表项方面重叠，但不完全相同。

例如，有人想在A类中查找东西，但不包括D类中的东西。如果选中A类，它将自动显示D类也适用于的所有列表项。

我想做的是，如果选中了A类，您可以选择将D类排除在搜索之外，这样就可以显示重叠的数据。反之亦然（如果选中了D类，则可以选择排除A类）。

如果可能的话，我也希望这适用于所有的类。以便您可以检查一个（或多个）类，但同时排除您不感兴趣的某个类，即使列表项重叠（即您检查了类D，并且不希望在类B中的列表项也在类D中）。

<div class="options">
  <label>
    <input type="radio" name="operation" value="union" id="op-union" checked>Union
  </label>
  <label>
    <input type="radio" name="operation" value="intersection" id="op-inter">Intersection
  </label>
</div>

<div class="categories">
  <span class="category">
    <input type="checkbox" value="classa" id="cat-classa">
    <label for="cat-classa">Class A</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classb" id="cat-classb">
    <label for="cat-classb">Class B</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classc" id="cat-classc">
    <label for="cat-classc">Class C</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classd" id="cat-classd">
    <label for="cat-classd">Class D</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classe" id="cat-classe">
    <label for="cat-classe">Class E</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classf" id="cat-classf">
    <label for="cat-classf">Class F</label>
  </span>
</div>

<div class="container"> 
  <ul>
    <div class="filterDiv classa classd"><li>List 1</li></div>
    <div class="filterDiv classa classe"><li>List 2</li></div>
    <div class="filterDiv classb classd classe"><li>List 3</li></div>
    <div class="filterDiv classc classf">List 4</li></div>
    <div class="filterDiv classb classd classf">List 5</li></div>
  </ul>
</div>

给定列表的性质，类和类型的任何组合都是可能的。通常，只有一个类，但有时会有两个。在实际的列表中，我也有远不止三个类附加到一个列表项。

脚本:

<div class="options">
  <label>
    <input type="radio" name="operation" value="union" id="op-union" checked>Union
  </label>
  <label>
    <input type="radio" name="operation" value="intersection" id="op-inter">Intersection
  </label>
</div>

<div class="categories">
  <span class="category">
    <input type="checkbox" value="classa" id="cat-classa">
    <label for="cat-classa">Class A</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classb" id="cat-classb">
    <label for="cat-classb">Class B</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classc" id="cat-classc">
    <label for="cat-classc">Class C</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classd" id="cat-classd">
    <label for="cat-classd">Class D</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classe" id="cat-classe">
    <label for="cat-classe">Class E</label>
  </span>
  <span class="category">
    <input type="checkbox" value="classf" id="cat-classf">
    <label for="cat-classf">Class F</label>
  </span>
</div>

<div class="container"> 
  <ul>
    <div class="filterDiv classa classd"><li>List 1</li></div>
    <div class="filterDiv classa classe"><li>List 2</li></div>
    <div class="filterDiv classb classd classe"><li>List 3</li></div>
    <div class="filterDiv classc classf">List 4</li></div>
    <div class="filterDiv classb classd classf">List 5</li></div>
  </ul>
</div>

提前感谢所有帮助你的人！我再次为措辞道歉，我对此很陌生，还在想办法解决这一切。非常感谢您的任何尝试。

顺晟科技：

您的代码很好。你需要一些修改。我没有改变您的代码风格，但是如果您使用javascript更好地使用let关键字（现代javascript)，请不要再使用var，并尝试理解减少代码的forEach循环（除非您使用break语句）