xshop/resources/js/panel/list-checkboxs.js

function clearSelection() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
}


function serializeForm(selector) {
    let form = document.querySelector(selector);
    if (form == null) {
        return [];
    }
    let formData = new FormData(form);
    let serializedArray = [];

    formData.forEach(function (value, key) {
        serializedArray.push({
            name: key,
            value: value
        });
    });

    return serializedArray;
}

function handleCheckChange() {
    let frm = serializeForm('#main-form');
    let bi = document.querySelector('#bulk-idz');

    bi.innerHTML = '';
    for (const item of frm) {
        let n = document.createElement("input");
        n.name = item.name;
        n.value = item.value;
        n.type = 'hidden';
        bi.appendChild(n);
    }

    if (frm.length == 0) {
        document.querySelector('#bulk-from').style.maxHeight = '0';
    } else {
        document.querySelector('#bulk-from').style.maxHeight = '250px';
    }

}

window.addEventListener('load', function () {
    let chkall = document.querySelectorAll(".chkall");

    if (chkall.length == 0){
        return false;
    }
    let toggle = document.querySelector('#toggle-select');
    if (toggle != null) {
        toggle?.addEventListener('click', function () {
            let checkboxes = document.querySelectorAll(".chkbox");
            checkboxes.forEach(function (checkbox) {
                if (!checkbox.checked) {
                    checkbox.checked = true;
                    checkbox.setAttribute("checked", "");
                } else {
                    checkbox.checked = false;
                    checkbox.removeAttribute("checked");
                }
            });

        });
        handleCheckChange();
    }
// Attach an event listener for "change" and "click" events
    chkall.forEach(function (chkall) {
        chkall.addEventListener("change", handleCheckboxChange);
        chkall.addEventListener("click", handleCheckboxChange);
    });

    function handleCheckboxChange() {
        let isChecked = this.checked;
        let table = this.closest("table");

        if (isChecked) {
            // Check all checkboxes in the table
            let checkboxes = table.querySelectorAll(".chkbox");
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = true;
                checkbox.setAttribute("checked", "");
            });
        } else {
            // Uncheck all checkboxes in the table
            let checkboxes = table.querySelectorAll(".chkbox");
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = false;
                checkbox.removeAttribute("checked");
            });
        }
        handleCheckChange();
    }


    // select with shift button
    const chkboxes = document.querySelectorAll('.chkbox');
    let lastChecked = null;

    chkboxes.forEach(chkbox => {
        chkbox.addEventListener('click', handleCheckboxClick);
        chkbox.parentNode.querySelector('label').addEventListener('click', handleCheckboxClick);
        chkbox.addEventListener('change', handleCheckChange);
    });

    function handleCheckboxClick(e) {
        clearSelection();

        let self = this;
        if (e.target.tagName === 'LABEL') {
            self = e.target.parentNode.querySelector('input');
        }
        if (!lastChecked) {
            lastChecked = self;
            return;
        }

        if (e.shiftKey) {
            const start = Array.from(chkboxes).indexOf(self);
            const end = Array.from(chkboxes).indexOf(lastChecked);
            const range = Array.from(chkboxes).slice(Math.min(start, end) + 1, Math.max(start, end));

            range.forEach(chkbox => {
                chkbox.checked = lastChecked.checked;
            });

        }

        handleCheckChange();
        lastChecked = self;

    }

    handleCheckChange();
});