基于复选框过滤对象数组

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 checkedvar getStores = stores.filter(function (store) {&nbsp; &nbsp; return storeTypesSelected.indexOf(store.storeType) > -1;});

Answer 2

从选中的复选框中，构建所选值的数组（或集）。然后，在遍历数组时，检查当前storeType是否包含在集合中：var stores = [{&nbsp; &nbsp; id: 1,&nbsp; &nbsp; store: 'Store 1',&nbsp; &nbsp; storeType: "shoes"&nbsp; },&nbsp; {&nbsp; &nbsp; id: 2,&nbsp; &nbsp; store: 'Store 2',&nbsp; &nbsp; storeType: "clothes"&nbsp; },&nbsp; {&nbsp; &nbsp; id: 3,&nbsp; &nbsp; store: 'Store 3',&nbsp; &nbsp; storeType: "sports"&nbsp; },&nbsp; {&nbsp; &nbsp; id: 4,&nbsp; &nbsp; store: 'Store 3',&nbsp; &nbsp; storeType: "shoes"&nbsp; }];document.addEventListener('change', () => {&nbsp; const checkedValues = [...document.querySelectorAll('.storesCheckBox')]&nbsp; &nbsp; .filter(input => input.checked)&nbsp; &nbsp; .map(input => input.value);&nbsp; const filteredStores = stores.filter(({ storeType }) => checkedValues.includes(storeType));&nbsp; 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){&nbsp; &nbsp; &nbsp; if(elems[i].checked){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;list.push(elems[i].value);&nbsp; &nbsp; &nbsp; }}var getStores = stores.filter(function (store) {&nbsp; &nbsp; return list.indexOf(store.storeType) >= 0;});return 语句将使用 indexOf 函数进行过滤。