CSS class application after click on LABEL and also on CHECKBOX

Question

I have an apparently simple doubt, but since I am a designer (and not DEV) I am breaking my head to solve and I can’t find the solution... I tried to find something similar here, but I couldn’t find it...

I made a simulation of what I have here: https://codepen.io/msales78/pen/bGbPrJo

What’s the big deal? After clicking on the LABEL, the element is scratched, because the class "on" is added, but I need it to work ALSO when clicking on the checkbox, but this does not occur... how could you get this effect?

Thank you!

Answer 1

Just add another selector to the input, and click to fetch the label.

For that use parent(), to get to the li and then something like find('label') to find the element and apply the style, thus:

$("ul.check-item li input[type=checkbox]").click(function() {
      if ($(this).parent().find("label").hasClass("on")) {
        $(this).parent().find("label").removeClass('on');
      } else{
        $(this).parent().find("label").addClass('on');
      } 
    });

It is also possible to search the label using closest() or next() for example.