Как лучше выбрать только выбранные checkbox?

Question

[Максим К]

Есть модальное окно и на нем checkbox'ы:

<div class="row">
                            <div class="col-md-6">
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <input type="checkbox" id="item1" value="А">
                                        <label for="item1">А</label>
                                    </li>
                                    <li class="list-group-item">
                                        <input type="checkbox" id="item2" value="Б">
                                        <label for="item2">Б</label>
                                    </li>
                                    <li class="list-group-item">
                                        <input type="checkbox" id="item3" value="В">
                                        <label for="item3">В</label>
                                    </li>
                                    <li class="list-group-item">
                                        <input type="checkbox" id="item4" value="Г">
                                        <label for="item4">Г</label>
                                    </li>
 </ul>
                            </div>

По нажатию кнопки необходимо будет собрать все в массив и отправить , но как сейчас более лаконично проверить все нажатые checkbox'ы???

Сейчас делаю так, но это видимо ооочень криво

let checkboxes = new Array();
$('#modal > div.modal-dialog > div > div.modal-body > div.modal-footer > div > div.col-md-4 > a').click(function() {
    checkboxes = [];
    if ($("#item1").is(':checked')) { checkboxes.push($('#item1').val()) }
    if ($("#item2").is(':checked')) { checkboxes.push($('#item2').val()) }
    if ($("#item3").is(':checked')) { checkboxes.push($('#item3').val()) }

    for (let i = 0; i < checkboxes.length; i++) {
        alert(checkboxes[i]);
    }
});

Comments

[Алексей Уколов]

#modal > div.modal-dialog > div > div.modal-body > div.modal-footer > div > div.col-md-4 > a

Адище-то какой...

[Сергей delphinpro]

.querySelectorAll('input[type=checkbox]:checked')

[Дмитрий Беляев]

$('#item1:checked, #item2:checked, #item3:checked').each(function() {
    checkboxes.push($(this).val());
});

[Максим К]

Алексей Уколов, просто кнопка сделала как ссылка

<div class="col-md-6">
                            <div class="price btnprice">
                                <a href="#" class="read" data-toggle="modal" data-target="#modal">Собрать тариф</a>
                            </div>
                        </div>

Согласен не очень красиво, зато работает. Как лучше реализовать???

[Максим К]

Сергей delphinpro,

let arr = [];
    let checkboxes = document.querySelectorAll("input[type='checkbox']:checked");

    checkboxes.forEach((item) => {
        arr.push(item.value)
    })

    alert(arr);