Переключение флажков по клику на div

154

03 февраля 2021, 03:10

Есть независимые блоки с карточками. Они могут быть и с радиокнопками и с чекбоксами. Мне надо сделать так, чтобы при клике на карточку активировался или выключался и чекбокс(радиокнопка) и сам div (переключается рамка вокруг). У меня почему то при клике по div-у так и работает, но если кликать непосредственно в инпут, то скрипт не срабатывает. Если кто подскажет в чем дело, буду очень благодарна!

https://codepen.io/Raneto4ka/pen/Ezqevb

function activeCardPreview(){
  $('.preview .wrapper-cards .custom-radio').on('click', function(){
    $(this).parent().siblings('.wrapper-cards').removeClass('checked');
    $(this).parent().toggleClass('checked');
    if ($(this).parent().hasClass('checked')){
      $(this).find('.card-check').prop('checked', true);
    } 
    else {
      $(this).find('.card-check').prop('checked', false);
    }
  });
  $('.preview .wrapper-cards .custom-checkbox').on('click', function(){
    $(this).parent().toggleClass('checked');
    if ($(this).parent().hasClass('checked')){
      $(this).find('.card-check').prop('checked', true);
    } 
    else {
      $(this).find('.card-check').prop('checked', false);
    }
  });
};
activeCardPreview();

Answer 1

prevetDefault() отключает дефолтное поведение при клике на элемент (если оно есть). И прокатывает написанный выше on('click'... Но остается под вопросом, зачем там label, в таком случае... можно его заменить на какой-нибудь span и обойтись вообще без добавленного куска JS.

CodePen

$('.wrapper-cards .custom-radio').on('click', function(){
  $(this).parent().siblings('.wrapper-cards').removeClass('checked');
  $(this).parent().toggleClass('checked');
  var check = $(this).parent().hasClass('checked');
  // Оно и так проверяет и возвращает true или false
  $(this).find('.card-check').prop('checked', check).trigger('change');
});
$('.wrapper-cards .custom-checkbox').on('click', function(){
  $(this).parent().toggleClass('checked');  
  var check = $(this).parent().hasClass('checked');
  $(this).find('.card-check').prop('checked', check).trigger('change');
});
$('.custom-control-label').on('click', function(e){
  e.preventDefault();
});

.trigger('change') — это чтобы и без label, если на инпуте будет событие on('change'...) — оно сработало. Можно убрать, если такого не предвидится.

(p.s.) а если чекбоксы там несут исключительно декоративный характер, там еще много чего можно убрать, привязав всё к добавляемому классу)