Question

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

我有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，那么我只想过滤衣服数据。根据商店类型，它可以是任意数量的复选框。你能帮我这个忙吗？

Answer 1

您可以尝试以下方法：

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

Answer 2

从选中的复选框中，构造一个选定值的数组（或Set）。然后，在遍历数组时，检查当前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" />

Answer 3

所有您需要的是保留复选框值以在数组中进行过滤。

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 个答案: