根据复选框过滤对象数组答案

【问题标题】：Filter Array of Objects based on checkboxes根据复选框过滤对象数组
【发布时间】：2020-03-06 19:48:50
【问题描述】：

您好，我想根据选中的复选框过滤我的数据。

我有 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" />

我的商店数据是

// my stores
var stores = [
    {
        id: 1,
        store: 'Store 1',
        storeType: "shoes"
    },
    {
        id: 2,
        store: 'Store 2',
        storeType: "clothes"
    },
    {
        id: 3,
        store: 'Store 3',
        storeType: "sports"
    },
    {
        id: 4,
        store: 'Store 3',
        storeSells: "shoes"
    }
]

所以，如果我选中 shoes 复选框，我想根据 storeType shoes 过滤数据。所以我写了

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

但是现在，如果我检查 clothes 和 shoes 已经检查。我想过滤shoes + clothes 数据。如果我取消选中，shoes 再次我只想过滤衣服数据。它可以是任意数量的复选框，具体取决于商店类型。你能帮我解决这个问题吗？

【问题讨论】：

@CertainPerformance 是的！抱歉，我会修复它。
将条件存储到数组中，然后在filter 中使用includes 方法。
任何答案对你有用吗？

标签： javascript arrays

【解决方案1】：

你可以试试这个：

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

【讨论】：

【解决方案2】：

您只需将复选框值保存在数组中即可过滤。

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 函数进行过滤。

【讨论】：

【解决方案3】：

从选中的复选框中，构造所选值的数组（或集合）。然后，在遍历数组时，检查当前的storeType是否包含在集合中：

var stores = [{
    id: 1,
    store: 'Store 1',
    storeType: "shoes"
  },
  {
    id: 2,
    store: 'Store 2',
    storeType: "clothes"
  },
  {
    id: 3,
    store: 'Store 3',
    storeType: "sports"
  },
  {
    id: 4,
    store: 'Store 3',
    storeType: "shoes"
  }
];

document.addEventListener('change', () => {
  const checkedValues = [...document.querySelectorAll('.storesCheckBox')]
    .filter(input => input.checked)
    .map(input => input.value);
  const filteredStores = stores.filter(({ storeType }) => checkedValues.includes(storeType));
  console.log(filteredStores);
});

Shoes: <input type="checkbox" name="shoes" value="shoes" class="storesCheckBox" />
Clothes: <input type="checkbox" name="clothes" value="clothes" class="storesCheckBox" />
Sports: <input type="checkbox" name="sports" value="sports" class="storesCheckBox" />

【讨论】：