JQuery: изменить класс метки на основе check/uncheck of checkbox

Question

У меня есть серия флажков (на основе выбора пользователя), я использую bootstrap CSS и хочу изменить класс parent (label). Следующий тип кода работает, он меняет класс, но он должен вернуться к оригиналу, если он не установлен.

HTML код:

<div class="btn-group" data-toggle="buttons"> 
    <label for="status" class="btn btn-default"> 
     <input type="checkbox" name="status[]" id="status" value="1"> 
     <span class="glyphicon glyphicon-ok"></span> 
    </label> 
    </div> 

Jquery:

 $('input:checkbox').change(function() { 
     if ($(this).prop('checked', true)) { 
      $(this).parent().addClass('btn btn-primary'); 
     } else { 
      ($(this).prop('checked', false)); 
      $(this).parent().addClass('btn btn-default'); 
     } 
     }); 

Я пытался несколько заместителей, toggleClass и т.д., но это не совсем верно. Я надеюсь, что когда пользователь отключит его, он вернется к исходному классу - btn-default.

Вот код на jsfiddle: http://jsfiddle.net/#&togetherjs=T34b6tblRc

Помощь будет весьма признателен, спасибо!

Answer 1

Изменить код:

$('input').change(function() {   
    var checked = $(this).is(':checked'); 
    $(this).parent().toggleClass('btn-primary',checked); 
    $(this).parent().toggleClass('btn-default',!checked);  
}); 

Это полностью изменит классы. Вам не нужно удалять класс btn.

$('input').change(function() {   
 
    var checked = $(this).is(':checked'); 
 
    $(this).parent().toggleClass('btn-primary',checked); 
 
    $(this).parent().toggleClass('btn-default',!checked);  
 
});

.btn-primary{ 
 
    background-color: red; 
 
} 
 

 
.btn-default{ 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-group" data-toggle="buttons"> 
 
    <label for="status" class="btn btn-default"> 
 
     <input type="checkbox" name="status[]" id="status" value="1"> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
    </label> 
 
    </div>

Answer 2

Могли бы эту работу? Дайте мне знать, чтобы удалить мой ответ, если не

$('input').click(function() { 
    $(this).parent().removeClass($(this).is(':checked') ? 'btn btn-default' : 'btn btn-primary'); 
    $(this).parent().addClass($(this).is(':checked') ? 'btn btn-primary' : 'btn btn-default'); 
}); 

Answer 3

Если вы хотите прочитать свойство, вы должны дать только один аргумент .prop(). Предоставление двух аргументов задает свойство второму аргументу, оно не сравнивает свойство с ним. Так оно и должно быть:

$('input:checkbox').change(function() { 
    if ($(this).prop('checked')) { 
     $(this).parent().addClass('btn btn-primary'); 
    } else { 
     $(this).parent().addClass('btn btn-default'); 
    } 
}); 

Вы также можете просто использовать if (this.checked), который является более эффективным, чем создание объекта JQuery и вызова метода на нем.

Answer 4

Добавить класс 'БТН БТН-умолчанию' вручную

$('input').change(function() { 
    var b = $(this).is(':checked'); 
    $(this).parent().addClass(b?'btn-primary':'btn-default'); 
    $(this).parent().removeClass(!b?'btn-primary':'btn-default'); 
}); 

Answer 5

Ваш код на jsfiddle пустым. Пожалуйста, исправьте это. Я хотел бы просмотреть ваш код в jsfiddle, чтобы узнать, как он работает.