Funkcja, która ma kliknąć niezaznaczone checkbox-y

Hej,

Mam prostą funkcję checkAll, która zaznacza wszystkie checkbox-y

    $('#checkAll').click(function () {
        $(':checkbox.custom-control-input').prop('checked', this.checked);
    });

I ta sprawdza się doskonale przy listach gdzie występują same checkbox-y

Ale głowię się teraz nad kolejną, która musi w odróżnieniu od poprzedniej kliknąć w te niezaznaczone (jest to konieczne, żeby zadziałała inna funkcja szefa, która to działa tylko na onclick)

Na szybko wymyśliłem coś takiego:

$('#checkAll').click(function () {
        $(':checkbox.custom-control-input').prop('checked', this.checked)
        $(':checkbox.custom-control-input').prop('click', this.click);
        $(':checkbox.custom-control-input').prop('click', this.click);
 });

i wstępnie działa ale "klika" w checkbox-y już zaznaczone. A to powoduje wyzerowanie wybranych wcześniej wartości w powiązanych (z checkbox-ami) listach rozwijanych ("form-control")

To zadanie to mój pierwszy kontakt z jQuery dlatego proszę o wyrozumiałość jeśli coś źle objaśniłem.
Czas na realizację mnie goni dlatego będę wdzięczny za pomysły co do rozwiązania tego problemu.

Pozdrawiam Adam

Nie możesz po prostu ustawić wszystkie checkboxy jako zaznaczone zamiast na nie klikać?

document.querySelectorAll('input[type=checkbox].custom-control-input').forEach((input) => input.checked = true);

Jeśli bardzo chcesz jQuery to

$(':checkbox.custom-control-input]').each(function() { this.checked = true });

Autorowi nie do końca o to chodziło. Spróbuj tak:

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" onclick="console.log('jeden');">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" onclick="console.log('dwa');" checked>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" onclick="console.log('trzy');">

document.querySelectorAll("INPUT[type='checkbox']:not(:checked)").forEach((input) => input.click());

@Freja Draco: Ślicznie dziękuję za pomoc.

Docelowo chciałbym zrobić tak

$('#checkAll').click(function () {
        if ($(this).prop("checked")) {
            document.querySelectorAll("INPUT[type='checkbox']:not(:checked)").forEach((input) => input.click());
        }
        else {
            document.querySelectorAll("INPUT[type='checkbox']:is(:checked)").forEach((input) => input.click());
        }
    });

Jednak nie do końca rozumie jak powinien działać ten fragment gdzie chciałbym wywołać odwrotny efekt.

            document.querySelectorAll("INPUT[type='checkbox']:is(:checked)").forEach((input) => input.click());

document.querySelectorAll("INPUT[type='checkbox']:not(:checked)").forEach((input) => input.click());
document.querySelectorAll("INPUT[type='checkbox']:checked").forEach((input) => input.click());

@Freja Draco: Jeszcze raz dziękuję ;)

Jesteś super :)