// where we have two arrays of checked and unchecked function onHandleCheckbox(checkbox) { // create a new attay of objects with the value and checked status checkbox.addEventListener("change", () => { const status = [...trainingRadioBtns].map((btn) => ({ value: btn.value, checked: btn.checked, })); // update global checkedValues array with objects of items that are checked then another with items unchecked checkedValues = status.filter((btn) => btn.checked).map((btn) => btn.value); notSelected = status.filter((btn) => !btn.checked).map((btn) => btn.value); // console.log("selected", checkedValues); // console.log("not selected", notSelected); // return values to the filteredItems array that match the below filteredItems = locations.filter((item) => { // Each individual match condition for filtering from the checkedvalues array or the notselected array const matchesFunded = (checkedValues.includes("governmentService") && item.governmentService) || notSelected.includes("governmentService"); const matchesOnline = (checkedValues.includes("isAvailableOnline") && item.isAvailableOnline) || notSelected.includes("isAvailableOnline"); const matchesPartTime = (checkedValues.includes("isAvailablePartTime") && item.isAvailablePartTime) || notSelected.includes("isAvailablePartTime"); const matchesApprentice = (checkedValues.includes("apprenticeshipTraineeship") && item.apprenticeshipTraineeship) || notSelected.includes("apprenticeshipTraineeship"); const matchesVetFeeCourse = (checkedValues.includes("isVetFeeCourse") && item.isVetFeeCourse) || notSelected.includes("isVetFeeCourse"); // Check if the item matches All of the selected filters and return return matchesFunded && matchesOnline & matchesPartTime & matchesApprentice & matchesVetFeeCourse; }); // updating functions noLocationsOverlay(filteredItems); checkLoadButton(filteredItems); displayLocations(); updateMarkers(filteredItems); }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter