Почему не происходит отправка ajax запроса при изменении состояния чекбокса? Происходит редирект на пустую страницу

Помогите, пожалуйста

Есть таблица, в которой динамически (CRUD) создаются строчки с разными названиями, именами и т.д

У каждой такой строчки на конце стоит форма, и в ней чекбокс. (По сути чекбокс)

При нажатии на этот чекбокс должен отправляться ajax запрос, и значение чекбокса записывается в бд в виде 1/0, (on/off), и следовательно по этому параметру определяется состояние чекбокса (checked)

Конечно, страница не должна перезагружаться.

Код чекбокса

<form action="#" data-path="example">
      <input type="checkbox" class="check">
</form>

Код на JS

let forms = Array.from(document.querySelectorAll('form'));

    let onSubmit = (event) => {
        event.preventDefault();
        let form = event.target;
        let url = $(form).data('path');
        let data = new FormData(form);
        $.ajax({
            method: "POST",
            url: url,
            data: data,
            success: () => {
                console.log('Выбран');
            }
        })
    }

    forms.forEach(form => {
        let setListenerToCb = (elem) => {
            let checkBox = elem.querySelector('.check');
            checkBox.addEventListener('change', () => {
                form.submit();
            });
            form.addEventListener('submit', onSubmit);
        }

        setListenerToCb(form);
    })

Проблема в том, что исполняющийся js скрипт не доходит до момента отправки ajax, он только отправляет саму форму и всё

Т.е код исполняется до момента

checkBox.addEventListener('change', () => {
                form.submit();
            });

А дальше всё

(на самом деле, происходит редирект на пустую страницу, но тут дело в контроллере, и в том, что я не могу отправить/принять ajax)

Что я не так делаю, и что можно изменить, помогите, пожалуйста

let forms = Array.from(document.querySelectorAll('form'));

    let onSubmit = (event) => {
        event.preventDefault();
        let form = event.target;
        let url = $(form).data('path');
        let data = new FormData(form);
        $.ajax({
            method: "POST",
            url: url,
            data: data,
            success: () => {
                console.log('Выбран');
            }
        })
    }

    forms.forEach(form => {
        let setListenerToCb = (elem) => {
            let checkBox = elem.querySelector('.check');
            checkBox.addEventListener('change', () => {
                form.submit();
            });
            form.addEventListener('submit', onSubmit);
        }

        setListenerToCb(form);
    })

<form action="#" data-path="example">
      <input type="checkbox" class="check">
</form>