Javascript 如何筛选多个元素/项目

我试图一次过滤多个项目。例如水果和动物，甚至3+。到目前为止，它一次只能选择一个项目。如何选择多个项目？我也试过了，但是它被窃听了，keept显示了文本，但是这应该是怎样的，但是用javascript

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“filterDiv”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}

.filterDiv{
浮动：左；
背景色：#2196F3；
颜色：#ffffff；
宽度：100px；
线高：100px；
文本对齐：居中；
保证金：2倍；
显示：无；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}

过滤器DIV元素
全部显示

汽车

动物

水果

颜色

宝马
橙色
沃尔沃汽车
红色
野马
蓝色
猫
狗
甜瓜
几维鸟
香蕉
柠檬
母牛

var inputs=document.getElementsByTagName（“输入”）；
var cbs=[]//将包含所有复选框
对于（变量i=0；i-1）{
w3AddClass（x[i]，“show”）；
}
}
}
否则{
w3AddClass（x[i]，“show”）；
}
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}

.filterDiv{
浮动：左；
背景色：#2196F3；
颜色：#ffffff；
宽度：100px；
线高：100px；
文本对齐：居中；
保证金：2倍；
显示：无；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}

过滤器DIV元素
全部展示
汽车

动物

水果

颜色

宝马
橙色
沃尔沃汽车
红色
野马
蓝色
猫
狗
甜瓜
几维鸟
香蕉
柠檬
母牛

输入中缺少属性

ID

属性

name

对收音机进行分组，一次只允许检查一个收音机，但它本身无法通过提交或javascript处理输入

您可以使用CSS

：checked

来选择下一步的兄弟姐妹，如果它只是关于视觉（无需提交或通过js处理），但它仍然需要id才能按预期工作

带有复选框的示例：

#全部：选中~.container.filterDiv{
显示：块；
}
.filterDiv，：非（#全部）：选中~.container.filterDiv{
浮动：左；
背景色：#2196F3；
颜色：#ffffff；
宽度：100px；
线高：100px；
文本对齐：居中；
保证金：2倍；
显示：无；
}
#汽车：检查~。集装箱。汽车，
#动物：选中~。容器。动物，
#水果：选中~。容器。水果，
#颜色：选中~.container.colors{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}

过滤器DIV元素
全部显示

汽车

动物

水果

颜色

宝马
橙色
沃尔沃汽车
红色
野马
蓝色
猫
狗
甜瓜
几维鸟
香蕉
柠檬
母牛

//如果我们将当前状态保存到某个地方，就可以轻松地筛选div。
var checkedCategories=[“汽车”、“动物”、“水果”、“颜色”]；
//我们需要一个功能来检测点击复选框并添加/删除该类别。
var changeCategory=函数changeCategory（事件）{
//事件对象将准确地告诉我们单击了什么。
var复选框=event.target；
//我们想要添加或删除的类别是属性
var category=checkbox.getAttribute（“数据类别”）；
//要检查数组中是否已经有类别，只需检查索引即可。
var savedCategoryIndex=checkedCategories.indexOf（类别）；
//如果选中该复选框，则该类别必须已存在于数组中或已添加。
if（checkbox.checked&&savedCategoryIndex==-1）{
选中类别。推送（类别）；
}
//如果未选中它并且它存在于阵列中，则需要将其删除。
如果（！checkbox.checked&&savedCategoryIndex！==-1），则为else{
检查类别。拼接（保存的类别索引，1）；
}
renderCategories（）；
};
//我们需要一个可重用的函数来显示/隐藏我们想要看到的任何类别。
var renderCategories=函数renderCategories（）{
//我们需要一个所有div的列表，所以我们只需要选择所有具有datacategory属性的div，并将它们分割成一个数组。
//