[Tipylja]

Здравствуйте, делаю некое подобие БЭМ-компонентов. Дошел до checkbox. Есть вот такая структура чекбокса:

<label class="checkbox checkbox--size-m">
    <span class="checkbox__box">
        <input class="checkbox__control" type="checkbox" autocomplete="off">
    </span>
    <span class="checkbox__text">Коробка</span>
</label>

При клике на checkbox, вернее на label с классом checkbox, элементу label добавляется класс .checkbox--checked, а непосредственно инпату(который и является чекбоксом) с классом .checkbox__control добавляется атрибут checked="checked":

<label class="checkbox checkbox--size-m checkbox--checked">
    <span class="checkbox__box">
        <input class="checkbox__control" type="checkbox" autocomplete="off" checked="checked">
    </span>
    <span class="checkbox__text" >Конфеты</span>
</label>

Вот такой код мне удалось написать для выполнения этой задачи:

$(function() {
    $(".checkbox").on("click", function(event) {
        event.preventDefault();       
        $(this).toggleClass("checkbox--checked");

        var chekcbox = $(this).children().children('.checkbox__control');
        
        if (chekcbox.attr('checked')) {
            chekcbox.removeAttr('checked');
        } else {
            chekcbox.attr('checked', 'checked');
        };

    });
});

Все в принципе работает, никаких проблем я не обнаружил пока, но насколько это правильно. Допустим правильно ли отслеживать именно клик $(".checkbox").on("click" .....) или возможно есть более подходящее событие. И очень смущает поиск инпата $(this).children().children('.checkbox__control'). Подскажите нормальное ли решение или есть что можно подправить? Спасибо