Snippets Collections
 trainingRadioBtns.forEach(onHandleCheckbox);

    // Update selectedOptions[] when checkboxes are clicked
    function onHandleCheckbox(checkbox) {
        checkbox.addEventListener("change", () => {
            const status = [...trainingRadioBtns].map((btn) => ({
                value: btn.value,
                checked: btn.checked,
            }));

            checkedValues = status.filter((btn) => btn.checked).map((btn) => btn.value); // selected check values array
            const notSelected = status.filter((btn) => !btn.checked).map((btn) => btn.value); // not selected check values array
            console.log("selected", checkedValues);
            console.log("not selected", notSelected);

            filteredItems = locations.filter((item) => {
                // Prepare each individual match condition for filtering
                // const matchesCategory = checkedValues.includes(item.category);
                const matchesFunded = (checkedValues.includes("funded") && item.funded) || notSelected.includes("funded");
                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 any of the selected filters (OR logic) and return

                return matchesFunded && matchesOnline & matchesPartTime & matchesApprentice & matchesVetFeeCourse;
            });

            // if no items are found on filtering, show a message in the DOM
            if (filteredItems.length === 0) {
                list.innerHTML = `<h4>No items exist with these current filters<h3>`;
            } else {
                displayLocations();
            }
        });
    }
const visibleCheckboxes = document.querySelectorAll('.checky')

visibleCheckboxes.forEach(checkbox => checkbox.addEventListener('change', () => {
let hiddenCheckbox = checkbox.nextElementSibling;
checkbox.checked ? hiddenCheckbox.value = 'Yes' : hiddenCheckbox.value = 'No';
}))

//html
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Cats
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Dogs
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Fish
</label>
star

Sun Feb 02 2025 22:43:02 GMT+0000 (Coordinated Universal Time)

#filtering #checkboxes
star

Sat Jun 12 2021 09:32:20 GMT+0000 (Coordinated Universal Time) https://codepen.io/hisamparker/pen/jOBepgP

#mongoose #javascript #html #form-data #checkboxes

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension