基于复选框过滤对象数组

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 storesvar 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

从选中的复选框中，构建所选值的数组（或集）。然后，在遍历数组时，检查当前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 函数进行过滤。