JQuery изменение класса CSS при смене флажка

Question

Я собрал несколько jQuery, чтобы изменить подсветку контейнера (по умолчанию красный, черный на чеке), когда установлен определенный флажок.Я чувствую, что этот код может быть упрощен, но не уверен, как.У кого-нибудь есть идеи, пожалуйста?

$("#container input:checkbox[id=cbTermsAndConditions]").change(function() {
   if ($(this).attr("checked")) {
     $('#container').addClass("containerblack");
     $('#container').removeClass("containerred");
   } else {
     $(this).parent().addClass("containerred");
     $(this).parent().removeClass("containerblack");
   }
});

Спасибо

Answer 1

Немного чище:

$("#container input:checkbox[id=cbTermsAndConditions]").click(function() {
   var $this = $(this);
   if ($this.attr("checked")) {
     $('#container').toggleClass("containerblack containerred");
   } else {
     $this.parent().toggleClass("containerred containerblack");
   }
});

Кроме того, вы можете получить проверенное значение с помощью необработанного JavaScript, заменив оператор if на:

if(this.checked) 

Answer 2

Используйте событие click, поскольку значение флажка не меняется, и вы, вероятно, можете использовать класс переключения, если все, что вы делаете, это добавление и удаление классов.