Изменение родительского элемента флажка css, если отмечено или не отмечено

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"});
    });
});

Он добавляет зеленый цвет фона, но не удаляет его. И если я оставлю флажок установленным, обновите, тд снова станет белым, и, если снова щелкнуть по нему, снять галочку, фон тд меняется на зеленый.

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

Answer 1

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

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

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

Answer 2

лучший из них

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

Answer 3

if ($ (this) .attr ("флажок") === "true")

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

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

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

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

if (this.checked)

Answer 4

Изменение

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

до

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

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

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

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

Подробнее см. Операторы сравнения

Answer 5

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

Answer 6

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

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

к этому:

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

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