Как перенаправить действие с одного элемента на другой в jquery?

Question

[Сергей Бурдужа]

Есть checkbox

<label>
  <input class="checkbox" type="checkbox" name="checkbox-test"> 
  <span id="options_c_1" class="checkbox-custom btn-outline-danger"></span>
  <span class="label">Подоконник</span>
</label>

Такого вида


Я его стилизовал таким способом.

.checkbox {
    display: none;
  }
  .checkbox-custom {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 8px;
    width: 23px;
    height: 22px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    border-radius: 50%;

    &:hover {
      cursor: pointer;
    }
  }
  .label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 20px;
  }
  .checkbox:checked + .checkbox-custom::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $accent url("../i/svg/check-white.svg") no-repeat center;
    border-radius: 2px;
  }
  .checkbox-custom,
  .checkbox:checked + .checkbox-custom::before {
    border-radius: 50%;
  }

А вот код в javascript

$('#options_c .checkbox-custom').on('click', function() {
        $(this).toggleClass('btn-outline-danger').toggleClass('btn-success');
        reCalc();
    });

Это калькулятор.
При выборе элемента $('#options_c .checkbox-custom') , происходит перерасчет.
Но как видите в html коде, это элемент обернут в теге label.
Проблема в том, что если кликнуть по тексту возле checkbox, <span class="label">Подоконник</span>,
перерасчет не происходит.

Нужно поймать клик по классу label и перенаправить на checkbox-custom,
$(this) = $('.checkbox-custom');

Наверное так как-то.
Просто я не до конца понимаю всю систему.

Answer 1

[Антон Спирин]

Клик по label меняет состояние нативного checkbox. Вы можете просто слушать change нативного элемента.

Comments

[Сергей Бурдужа]

Наверно вы не до конца прочитали мой вопрос.
Дело в том, что если кликаю по

<span id="options_c_3" class="checkbox-custom btn-outline-danger"></span>

происходит перерасчет, а если по тексту <span class="label">Отлив</span> - нет.

Или мы общаемся на разных языках.

Я пытаюсь решить проблему через объект события.

[Сергей Бурдужа]

А как его слушать?

[Антон Спирин]

Сергей Бурдужа, клик по элементу label и по любому дочернему меняет состояние input type=checkbox.
Все что вам надо это слушать событие change на input.
Простой пример.

[Сергей Бурдужа]

Антон Спирин, Теперь мне не доступен не $(this), не объект события e.

this.addEventListener('change', function(e){
            if(e.target.change){
                
                console.log($(this));
                console.log(e.target);

                $(this).toggleClass('btn-outline-danger').toggleClass('btn-success');
                reCalc();
            }
        });

Я уже запутался))

[Антон Спирин]

Сергей Бурдужа, вам надо просто повесить событие на input:
$('.checkbox').change(reCalc);

В строке ниже нет необходимости:

$(this).toggleClass('btn-outline-danger').toggleClass('btn-success');

Менять цвет в зависимости от состояния checkbox можно так.
Хороший пример pure css чекбоксов.

[Сергей Бурдужа]

Антон Спирин, Не работает ваш код.
Не я писал логику калькулятора. Меня попросили перенести с одного сайта на другой и поменять стили.
Все сделал, остался только косяк с checkbox.
Вот весь код

файл с кодом

Тут по логике, если у checkbox есть класс succes if ($('#options_c_3').hasClass('btn-success'))
только тогда идет перерасчет.

Не зря я мучаюсь.
Дело не в стилях.

[Сергей Бурдужа]

Антон Спирин, Все зависит от этого элемента и какой у него класс.

<span id="options_c_3" class="checkbox-custom btn-outline-danger"></span>

Если danger, перерасчет не идет.

[Антон Спирин]

Сергей Бурдужа, в вопросе ни о каких условиях речи не шло.
Слушайте change на input или click по нативному label, а там проверяйте соседние или дочерние элементы.
Вообще не вижу проблемы.

[Сергей Бурдужа]

Сергей Бурдужа, Спасибо, что помогли.
Я нашел решение, но вы дали направление.

[Сергей Бурдужа]

Антон Спирин, Спасибо, что помогли.
Я нашел решение, но вы дали направление.
А код из ссылки, не я его писал.

Answer 2

[Сергей Бурдужа]

Решил я проблему следующим кодом

$('#options_c label').on('click', function(e) {

        if(e.target.classList[0] === 'label' || e.target.classList[0] === 'checkbox-custom'){
            $(this).find('.checkbox-custom').toggleClass('btn-outline-danger').toggleClass('btn-success');
            reCalc();
        }
        
    });

Я не спорю, может и костыль, но я не супер разработчик, а пока, что только учусь.