有复选框显示某些东西？

Question

完全不知道如何做到这一点或从哪里开始。但是，我想为它使用jQuery。

我想要一个约300个项目的列表。每个项目从一个到几个不同的类别分配。

E.g：

项目：

香蕉，橙子 ， 奶酪，蛋糕

分类

水果， 黄色，棕色 ， 或者安格， 甜品

的项目将被分配了类似以下内容：

香蕉 - 黄色，水果

橙子 - 橘子，水果

奶酪 - 黄色

蛋糕 - 布朗，甜品

。

我需要能够勾选复选框的任意组合 - 例如，如果我勾选'黄色和水果'，它会显示橙子，香蕉和奶酪。 （注意，我需要所有东西都是黄色加所有东西都是水果，而不是只有黄色水果）。或者，如果我只勾选黄色，它会显示奶酪和香蕉。如果我点了甜点和橙色，它会显示蛋糕和橙子。希望你能理解我的意思。

我真的很感谢任何见解或帮助如何做到这一点，谢谢。

Answer 1

Matt B.既然您是网络开发的新手，让我告诉您一个解决方案，我认为您可以从我的经验中找到最适合您的解决方案。你是web开发新手，所以我建议你不要使用MySql作为数据库，PHP作为逻辑基础...所以我认为你必须关注HTML，CSS现在让我引导你做什么为达到这一目标，积分是... 1。创建具有结构的HTML文件中像这样

<input class="yFruit" type="checkbox" value="YellowFruit"> Yellow Fruit<br> 
<input class="rFruit" type="checkbox" value="RedFruit"> Red Fruit<br> 
<div class="itemsContainer"> 
    <div class="item" data-category="YellowFruit"> Banana </div> 
    <div class="item" data-category="RedFruit"> Apple </div> 
</div> 

使用CSS，你喜欢

的风格，这些元素现在是时候为Javascript

你知道javascripts事件在这种情况下非常有用，就像当我点击某物时，我可以检测到我单击的是什么elemenet。所以当我们选择其中一个用html创建的复选框时，我们可以看到它与所有元素匹配的值（在这种情况下，所有的水果都带有class =“item”），我们可以为每个元素添加css属性项目也喜欢，如果我们想隐藏一些我们可以做到的元素，现在让我们看看代码。

// JS Code 
// assigning all the checkbox in variables 
var yFruit = document.querySelector(".yFruit"); 
var rFruit = document.querySelector(".rFruit"); 
// allItems is an array containing all the item elements in it 
var allItems= document.querySelectorAll(".item"); 

// creating a function to only show the yFruit 
function showYFruitOnly(){ 
    for (i = 0; i < allItems.length; i++) { 
     if(allItems[i].getAttribute("data-category") == "YellowFruit"){ 
      // display only if it is from yellow fruit category 
      allItem[i].style.display = "block"; 
     }else{ 
      // do not display if it is not from that category 
      allItem[i].style.display = "none"; 
     } 
    } 
} 

// code below this line is checking if yFruit is checked or not 
//every time some one clicks on it 
// if it is checked then the code is running 
yFruit.onchange = function(){ 
if(yFruit.checked == true){ 
    // running the showYFruitOnly function if checkbox is checked 
    showYFruitOnly; 
} 
} 

您可以创建更多的情况下更fuctions等等等试试这个，我敢打赌，你会学到很多做这个....

Answer 2

我会制作一个对象数组，其中每个对象都有一个name属性和一个categories属性，该属性是一个字符串数组，其中每个字符串都是该对象所属的类别名称。然后，您可以检查选中哪个类别复选框，然后遍历所有对象，只显示在其“类别”属性中包含所有选定类别的对象。您可以通过创建具有选定对象属性的循环来显示它们。你可以使用内循环for循环for像这样找到合适的对象：

伪代码：

//loop through the array of objects 
// for ever element, loop through its `categories` property and check if 
// it has the current element in the array of selected categories 
// (`selected`). Then, do that for every element in `selected` 

我知道这可能看起来混乱，我道歉，如果是这样，但我希望它能帮助。