過濾項目選中復選框

Question

我只想使用jquery和javascript制作一個帶有checkbox數組的過濾器。 當只選中一個復選框時，它可以正常工作，但是當我選擇兩個或更多復選框時，它不會顯示所有的div。 你能不能幫我找到我的錯誤。 我想通過過濾器數組進行過濾。 我們的數組名稱是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

使用querySelector您只能選擇一個元素。 這就是為什么你只在第一個.customCheck復選框中添加一個事件監聽器。

您需要將一個事件偵聽器附加到所有復選框。 為此，您可以使用querySelectorAll而不是querySelector ，然后將事件附加到每個輸入：

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

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