如果另一个类的复选框已被选中，如何从 jQuery 过滤器中排除某个复选框类？

Posted 2023-05-08

【中文标题】如果另一个类的复选框已被选中，如何从 jQuery 过滤器中排除某个复选框类？

【英文标题】：How can I exclude a certain checkbox class from a jQuery filter if another class's checkbox is already checked?

【发布时间】：2021-10-28 08:08:00

【问题描述】：

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

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

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

比如说，有人想查找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>

鉴于列表的性质，类和类型的任意组合都是可能的。通常，只有一堂课，但有时有两堂课。在实际列表中，我的一个列表项也不仅仅是三个类。

脚本：

<script>
var checkboxes = document.querySelectorAll(".categories input");
for(var i = 0; i < checkboxes.length; i++) 
  checkboxes[i].addEventListener("change", filter);

var radios = document.getElementsByName("operation");
for(var i = 0; i < radios.length; i++) 
  radios[i].addEventListener("change", filter);

filter();
function filter() 
  var i, j;

  // Choose an operation
  var operation = document.getElementById("op-union").checked ? "union" : "intersection";

  // Get the selected categories
  var checkboxes = document.querySelectorAll(".categories input");
  var categories = [];
  var c;
  for(i = 0; i < checkboxes.length; i++) 
    if(checkboxes[i].checked) 
      c = checkboxes[i].value;
      categories.push(c);
    
  

  // Apply the filter
  var items = document.querySelectorAll(".filterDiv");
  var item, show;
  for(i = 0; i < items.length; i++) 
    item = items[i];
    if(categories.length == 0) 
      show = true;
     else if(operation == "union") 
      // Union: Only one of the categories needs to exist
      show = false;
      for(j = 0; j < categories.length; j++) 
        if(item.classList.contains(categories[j])) 
          show = true;
          break;
        
      
     else 
      // Intersection: All of the categories must apply
      show = true;
      for(j = 0; j < categories.length; j++) 
        if(!item.classList.contains(categories[j])) 
          show = false;
          break;
        
      
    

    if(show) 
      item.classList.add("show");
     else 
      item.classList.remove("show");
    
  

</script>

提前感谢任何提供帮助的人！我再次为措辞道歉，我对此并不陌生，并且仍在想办法解决这一切。非常感谢任何尝试。

【问题讨论】：

当有许多其他选项时，为什么只有两个单选按钮（“A 或 B”和“A 和 B”），例如“A 或 C”、“A 和 C”等）？听起来您可以摆脱单选按钮并添加另一个复选框：“[_] Verbatim？”。如果选中该框，则表示显示具有完全所选类的项目，如果未选中（这是默认设置），则显示包含至少的项目i> 那些选定的类。此外，尚不清楚您是否想要“显示包含这些类中的任何 的项目（不仅仅是所有 这些类）的选项。我建议您澄清您的要求。

老实说，我不确定我在用单选按钮做什么。他们在那里是因为工会和交叉路口的差异，我没有和他们玩过那么多。当我发帖时我并没有考虑它们，并且不小心留下了它们，因为它们被标记在页面本身上——它们实际上并没有像我在帖子中所说的那样指代 A 和/或 B。我已经解决了。

【参考方案1】：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="options">
  <label><input type="radio" name="operation" value="union" id="op-union" checked>A or B</label>
  <label><input type="radio" name="operation" value="intersection" id="op-inter">A and B</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>
<script>
  
var checkboxes = document.querySelectorAll(".categories input");
for(var i = 0; i < checkboxes.length; i++) 
  checkboxes[i].addEventListener("change", filter);

var radios = document.getElementsByName("operation");
for(var i = 0; i < radios.length; i++) 
  radios[i].addEventListener("change", filter);

filter();
function filter() 
  var i, j;

  // Choose an operation
  var operation = document.getElementById("op-union").checked ? "union" : "intersection";

  // Get the selected categories
  var checkboxes = document.querySelectorAll(".categories input");
  var categories = [];
  var c;
  for(i = 0; i < checkboxes.length; i++) 
    if(checkboxes[i].checked) 
      c = checkboxes[i].value;
      categories.push(c);
    
  
 

  // Apply the filter
  var items = document.querySelectorAll(".filterDiv");
   items.forEach(item=>item.style.display='block')
  var item, show;
  for(i = 0; i < items.length; i++) 
    item = items[i];
    if(categories.length == 0) 
      show = true;
     
     else if(operation == "union") 
      // Union: Only one of the categories needs to exist
   
      show = false;
      for(j = 0; j < categories.length; j++) 
        if(item.classList.contains(categories[j])) 
        
          show = true;
          break;
        
      
      if(!show)
        item.style.display="none";
      
     else 
      //  console.log(operation)
      // Intersection: All of the categories must apply
      show = true;
      for(j = 0; j < categories.length; j++) 
        if(!item.classList.contains(categories[j])) 
          item.style.display="none";
          break;
        
      
    

    // if(show) 
    //   item.classList.add("show");
    //  else 
    //   item.classList.remove("show");
    // 
  



</script>
</body>
</html>