Проблема в том, что из-за особенностей
<label>, событие клика срабатывает два раза, на непосредственно самом
<label> и на
<input/> (но обработчик, который висит на
<label> все равно его ловит, ибо
всплытие), поэтому класс
active добавляется и сразу же удаляется. Хотя если кликать непосредственно на сам
<input/>, то клик на
<label> не будет генерироваться, и класс на
<label> будет меняться как и задумано. Выхода я вижу как минимум два:
первый
слушать не
click, а
change на
<input> и если
:checked то меням класс
input.addEventListener(function(e){
if (!e.target.checked) {
$(label).addClass('active');
return;
}
if (e,target.cheked) {
$(label).removeClass('active');
return;
}
});
второй
еще во времена динозавров придумали делать все это на css без лишней головной боли:
<label>
<input type="checkbox">
<span>home</span>
</label>
input:checked + span {
color: red;
}
