过滤项目选中复选框

Question

I just want to make a filter with checkbox array using jquery and javascript. It works fine when only one checkbox is selected but when I select two or more checkboxes it doesn't show all the divs. Could you please help me to find my mistake. I want to filter through the filter array. The name of our array is FlyList

 let FlyList = [ { id: "1", Airline_number: "961", Type_ticket: "systemi", Airline: "dubai", fly_time: "04:00-08:00", Class_type: "Economical" }, { id: "2", Airline_number: "962", Type_ticket: "charteri", Airline: "frans", fly_time: "08:00-11:00", Class_type: "Commercial" }, { id: "3", Airline_number: "963", Type_ticket: "systemi", Airline: "Emirates", fly_time: "11:00-14:00", Class_type: "Commercial" }, { id: "4", Airline_number: "964", Type_ticket: "systemi", Airline: "Emirates", fly_time: "14:00-17:00", Class_type: "Economical" }, { id: "5", Airline_number: "965", Type_ticket: "charteri", Airline: "dubai", fly_time: "17:00-21:00", Class_type: "Commercial" }, { id: "6", Airline_number: "966", Type_ticket: "charteri", Airline: "frans", fly_time: "21:00-24:00", Class_type: "Economical" } ]; function customFilter(list, field, value) { let fill = list.filter(item => { if (typeof filter === "object") { value.forEach(val => { return item[field] === value; }); } }); console.log(fill); } let filterCheckbox = document.querySelector(".customCheck"); filterCheckbox.addEventListener("change", e => { e.preventDefault(); // jquery // var field = $(this).parents('.filter_type').attr('data-field'); let field = document.querySelector(".filter_type").getAttribute("data-field"); // jquery let val = e.target.value; customFilter(FlyList, field, val); // console.log(val); }); <!-- begin snippet: js hide: false console: true babel: false --> 

 <div class="filters"> <div class="collapse show" id="collapseFilters"> <div class="filter_type" data-field="Type_ticket"> <h6> Type of ticket <div class="switcher float-left "> <label class="customToggle small"> <input type="checkbox" name="" id="" class="selectall" /> all Type of ticket <div class="indicator"></div> </label> </div> </h6> <ul> <li> <label class="customCheck w-100 " id="filter-check"> <input type="checkbox" name="" value="systemi" class="individual" /> systemi <div class="indicator"></div> </label> </li> <li> <label class="customCheck w-100" id="filter-check2"> <input type="checkbox" name="" value="charteri" class="individual" /> charteri <div class="indicator"></div> </label> </li> </ul> </div> <div class="filter_type airlineSelection" data-field="Airline"> <h6> airline <div class="switcher float-left"> <label class="customToggle small"> <input type="checkbox" name="" id="" /> all airline <div class="indicator"></div> </label> </div> </h6> <ul> <li> <label class="customCheck" id=""> <input type="checkbox" value="frans" name="inlineRadioOptions" /> frans <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" name="inlineRadioOptions" /> dubai <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="emirates" name="inlineRadioOptions" /> emirates <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="frans" name="inlineRadioOptions" /> frans <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="emirates" name="inlineRadioOptions" /> emirates <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="dubai" name="inlineRadioOptions" /> dubai <div class="indicator"></div> </label> </li> </ul> </div> <div class="filter_type" data-field="Class_type"> <h6> Class_type <div class="switcher float-left"> <label class="customToggle small"> <input type="checkbox" name="" id="" /> all Class_type <div class="indicator"></div> </label> </div> </h6> <ul> <li> <label class="customCheck" id=""> <input type="checkbox" value="economical" name="inlineRadioOptions" /> economical <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="commercial" name="inlineRadioOptions" /> commercial <div class="indicator"></div> </label> </li> </ul> </div> <div class="filter_type" data-field="fly_time"> <h6> fly_time <div class="switcher float-left"> <label class="customToggle small"> <input type="checkbox" name="" id="" /> all fly_time <div class="indicator"></div> </label> </div> </h6> <ul> <li> <label class="customCheck" id=""> <input type="checkbox" value="04:00-08:00" name="inlineRadioOptions" /> 04:00-08:00 <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="08:00-11:00" name="inlineRadioOptions" /> 08:00-11:00 <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="11:00-14:00" name="inlineRadioOptions" /> 11:00-14:00 <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="14:00-17:00" name="inlineRadioOptions" /> 14:00-17:00 <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="17:00-21:00" name="inlineRadioOptions" /> 17:00-21:00 <div class="indicator"></div> </label> </li> <li> <label class="customCheck"> <input type="checkbox" value="21:00-24:00" name="inlineRadioOptions" /> 21:00-24:00 <div class="indicator"></div> </label> </li> </ul> </div> </div> </div> 

Answer 1

With querySelector you select only one element. That's why you add an event listener to only first .customCheck checkbox.

You need to have an event listener attached to all the checkboxes. To do so you can use querySelectorAll instead of querySelector and then attach an event to each input:

let filterCheckboxes = document.querySelectorAll('.customCheck');

filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change' , (e) => { 
  console.log(e);
  // filtering goes here
}))