Изменение css родительского элемента checkbox, если он установлен или не установлен

Question

По сути, у меня есть флажок внутри элемента td, и я хочу, чтобы он имел один цвет фона, когда флажок установлен, и другой цвет фона, когда флажок снят.Другими словами, я хочу, чтобы он подчеркивал, проверено это или нет.

Я попытался использовать то же решение, что и здесь: Событие переключения Jquery изменяет значение флажка

Но по какой-то причине я не могу заставить это работать.

    $(document).ready(function(){
    $("input:checkbox").change(function() {
        if($(this).attr("checked") === "true") {
            // CHECKED, TO WHITE
            $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
            return;
        }
        //NOT CHECKED, TO GREEN
        $(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
    });
});

Это добавляет зеленый цвет фона, но не удаляет его.И если я оставлю флажок установленным, обновлю, td снова станет белым, а после повторного нажатия на флажок, снятия с него флажка, фон td изменится на зеленый.

Я все еще новичок в этом, понятия не имею, что здесь может быть не так, и пытаюсь разобраться в этом уже несколько часов.Такая простая вещь, но просто не могу заставить ее работать.

Answer 1

Изменение

if($(this).attr("checked") === "true")

Для

if($(this).attr("checked") === true)

Поскольку вы сравниваете, используя strict equal, два типа данных должны быть одинаковыми.

typeof ( $(this).attr ( "checked" ) )

сообщит вам, что это из логическое значение введите, и вы сравните его со строкой.

Для получения дополнительной информации смотрите Операторы сравнения

Answer 2

Есть лучший способ проверить, установлен ли флажок:

$(this).is(':checked')

Это немного более надежно.

Answer 3

  

if ($ (this) .attr (" проверено ") === " true ")

attr не читает атрибуты HTML. Это обманчиво. Если бы он действительно считывал атрибуты, строковое значение для checked было бы 'checked' , а не 'true' . Но это не так.

На самом деле он читает свойства объектов JavaScript, используя только имена атрибутов вместо имен свойств в тех немногих местах, где они различаются. Свойство checked дает вам логическое значение, поэтому нет необходимости сравнивать его с чем-либо, вы можете просто сказать:

if ($(this).attr('checked'))

или, что еще проще, полностью эквивалентный:

if (this.checked)

Answer 4

лучший из них -

if($("this").is(':checked'))
 {
   $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
 }

Answer 5

Ознакомьтесь с этой статьей о разнице между =, == и == = в JavaScript Или этот об операторах равенства в js.

Answer 6

Попробуйте изменить это:

$(this).attr("checked") === "true"

на это:

!!$(this).attr("checked") === true

Это преобразует все не-булевы значения в булевы и позволит сработать безопасному сравнению типов, даже если строка " true " возвращается (если возвращается строка false, то все равно будет иметь значение true ....)