Как объединить эти события?

Question

[sergey]

$('.wrap-checkbox').click(function() {
        $('.wrap-checkbox').removeClass("active");
        $(this).addClass("active");
    });

    $('.cars-item').click(function() {
        $('.cars-item').removeClass("active");
        $(this).addClass("active");
    });

Есть блок, и в нем чекбокс стилизованный:
при клике на чекбокс все срабатывает верно ( чекбокс активный, рамка вокруг блока появляется)
при клике на автомобиль или другую часть блока (чекбокс не активируется, появляется только рамка). Как обьеденить эти события, чтобы при клике на чекбокс, или на блок срабатывал и чекбокс и рамка?

Answer 1

[Денис]

Самый простой способ и без JS - это задать родительский элемент label для изображения и input-а

<label>
  <img src="image.jpg">
  <input type="checkbox">
</label>

Answer 2

[name surname]

активируем чекбокс

$('input[type="checkbox"]').prop('checked' , true);

update
попробуйте добавьте на сайт в данный блок кода новые строчки

$('.cars-item').click(function() {
        $('.cars-item').removeClass("active");
        $(this).addClass("active");
        // новый код
        $('.cars-item').find('.element-checkbox').prop('checked' , false);
        $(this).find('.element-checkbox').prop('checked' , true);
    });

Comments

[sergey]

хорошо а как быть с блоком тогда?

[name surname]

SM: если я правильно понял, то при клике на блок ищем нужный чекбокс и к нему prop('checked' , true);

[sergey]

name surname: в данном случае при клике на блок чекбокс не активируется, только при клике на сам чекбокс

[name surname]

мой код вверху должен был решить эту проблему

[sergey]

name surname: можете вот тут глянуть: martynuk.esy.es

[sergey]

name surname: также проблема не решилась, я думаю что возможно это из-за стилизации чекбокса

[name surname]

SM: ну да, у него opacity 0

[sergey]

name surname: спасибо за советы, но проблема решилась просто