Флажок добавить класс

Question

Я хочу добавить класс к своей метке моего флажка, если он установлен.

Вот мой HTML

<ul class="checkbox-list">
    <li><label class="rounded-all">Google <input class="checkbox-row" name="google" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Bing <input class="checkbox-row" name="bing" type="checkbox" value=""></label></li>
    <li><label class="rounded-all">Facebook <input class="checkbox-row" name="facebook" type="checkbox" value=""></label> </li> 
</ul>

Я пытался с этим фрагментом кода, который я получил здесь, но некажется, тоже делают трюк:

$(".checkbox-row").change(function() {
    $(this).closest('.checkbox-list li label').toggleClass("selected", this.checked);
});

Answer 1

То, что у вас работает, вы можете проверить здесь . Вероятно, ваш CSS-селектор для вашего класса .selected недостаточно конкретен, и поэтому свойства просто не применяются.

Например, это может не сработать (например, если стиль .checkbox-list li label определен с другим цветом):

.selected { color: red; }

В то время как более конкретный селектор будет:

.checkbox-list li label.selected { color: red; }

---

Хотя это ничего не стоит, ваш .closest() вызов может быть немного упрощен с помощью label:

$(".checkbox-row").change(function() {
  $(this).closest('label').toggleClass("selected", this.checked);
});

Answer 2

Попробуйте это:

$(".checkbox-row").change(function() {
    if($(this).is(':checked')) 
        $(this).parent().addClass('selected'); 
    else 
        $(this).parent().removeClass('selected');
});