Javascript 按复选框组的多重筛选元素

我试图用这段代码创建一个简单的过滤器UI，但这里有两个问题

1-如果开始使用颜色过滤器，则其不起作用。如果用户首先按形状进行过滤，它们就可以工作

2-在“按形状过滤”中，如果选择“方形”，它将正确过滤框，但如果取消选中“方形”，它将删除所有不正确的框，现在应显示所有框

我做错了什么？我如何解决这个问题

变量检查=$'.shape、.color、.size'， 框=$'.box' 检查。关于“更改”，函数{ 变量选择器=checks.mapfunctioni{ var name=this.className， 选中=$：选中，此 如果选中，则.length==0选中=$this.children 返回checked.mapfunction{ 返回[data-+name+='+$this.dataname+'] }.get.join， }.得到 //控制台日志选择器 var OKBOKS=盒子 选择器。forEachfunctionsel{ OKBOKS=OKBOKS.filtersel } //向左设置动画 Okboxs.show500； box.notokbox.hide500 }; 身体{ 填充：40px； } .盒子{ 浮动：左； 利润率：10px； } 瑞德先生{ 背景：红色； } 格林先生{ 背景：绿色；} 黄先生{ 背景：黄色；} 戴蒙德先生{ 高度：60px； 文本对齐：居中； 变换：旋转45度！重要； 宽度：60px； } .圆圈{ 高度：60px； 边界半径：50%； 宽度：60px； } .广场{ 高度：60px； 宽度：60px； } .尺寸输入{ 显示：无； } 按形状过滤 广场 圆圈 金刚石 按颜色过滤 红色 黄的 绿色 50 51 50 50 51 50 50 51 50 52 51 54 50 51 54 50 51 52 53 51 54 50 51 52

---

如果在过滤器组上添加额外的类，并且只使用一点点更改html结构，那么脚本将无法工作

这是您的工作示例，但我不建议长期使用它

变量检查=$'.shape、.color、.size'， 框=$'.box' 检查。关于“更改”，函数{ 变量选择器=checks.mapfunctioni{ var name=this.className， 选中=$：选中，此 如果选中，则.length==0选中=$this.children 返回checked.mapfunction{ 返回[data-+name+='+$this.dataname+'] }.get.join， }.得到 //控制台日志选择器 var OKBOKS=盒子 选择器。forEachfunctionsel{ OKBOKS=OKBOKS.filtersel } //向左设置动画 Okboxs.show500； box.notokbox.hide500 }; 身体{ 填充：40px； } .盒子{ 浮动：左； 利润率：10px； } 瑞德先生{ 背景：红色； } 格林先生{ 背景：绿色；} 黄先生{ 背景：黄色；} 戴蒙德先生{ 高度：60px； 文本对齐：居中； 变换：旋转45度！重要； 宽度：60px； } .圆圈{ 高度：60px； 边界半径：50%； 宽度：60px； } .广场{ 高度：60px； 宽度：60px； } .尺寸输入{ 显示：无； } 按形状过滤 广场 圆圈 金刚石 按颜色过滤 红色 黄的 绿色 50 51 50 50 51 50 50 51 50 52 51 54 50 51 54 50 51 52 53 51 54 50 51 52