Javascript 基于复选框筛选对象数组

您好，我想根据选中的复选框筛选我的数据

我有3个复选框

<input type="checkbox" name="shoes" value="shoes" class="storesCheckBox" />
<input type="checkbox" name="clothes" value="clothes" class="storesCheckBox" />
<input type="checkbox" name="sports" value="sports" class="storesCheckBox" />

因此，如果我选中

shoes

复选框，我想根据storeType

shoes

过滤数据。所以我写了

var getStores = stores.filter(function (store) {
    return store.storeType === 'shoes';
});

---

但是现在，如果我检查

衣服

和

鞋子

已经检查过了。我想过滤

鞋+衣服

数据。如果我再次取消选中，

shoes

，我只想过滤衣服数据。它可以是任意数量的复选框，具体取决于商店类型。您能帮我解决这个问题吗？

从选中的复选框中，构造所选值的数组（或集合）。然后，在迭代数组时，检查当前的

storeType

是否包含在集合中：

var存储=[{
id:1，
商店：“商店1”，
店面类型：“鞋子”
},
{
id:2，
商店：“商店2”，
店面类型：“衣服”
},
{
id:3，
商店：“商店3”，
店面类型：“运动”
},
{
id:4，
商店：“商店3”，
店面类型：“鞋子”
}
];
document.addEventListener（'change'，（）=>{
const checkedValues=[…document.querySelectorAll（'.storesCheckBox'）]
.filter（输入=>input.checked）
.map（输入=>input.value）；
const filteredStores=stores.filter（{storeType}）=>checkedValues.includes（storeType））；
控制台日志（过滤器存储）；
});
鞋：
衣服：
运动：
您可以尝试以下方法：

var storeTypesSelected; //array of the types checked
var getStores = stores.filter(function (store) {
    return storeTypesSelected.indexOf(store.storeType) > -1;
});

您只需在数组中保留用于筛选的复选框值

var elems = document.getElementsByClassName("storesCheckBox");
var list = [];
for(var i=0; elems[i]; ++i){
      if(elems[i].checked){
           list.push(elems[i].value);
      }
}
var getStores = stores.filter(function (store) {
    return list.indexOf(store.storeType) >= 0;
});

return语句将使用indexOf函数进行过滤。
@CertainPerformance yes！很抱歉，我将修复它。将您的条件存储到一个数组中，然后在
筛选器中使用
includes
方法。有任何答案对您有效吗？
var elems = document.getElementsByClassName("storesCheckBox");
var list = [];
for(var i=0; elems[i]; ++i){
      if(elems[i].checked){
           list.push(elems[i].value);
      }
}
var getStores = stores.filter(function (store) {
    return list.indexOf(store.storeType) >= 0;
});