javascript - 如果选中或未选中，更改复选框的父元素 css

Question

基本上，我在 td 元素中有一个复选框，我希望它在复选框被选中时具有一种背景颜色，而在复选框未被选中时具有另一种背景颜色。所以换句话说，我希望它突出显示它是否已选中。

我尝试使用与此处相同的解决方案:Jquery toggle event is messing with checkbox value

但出于某种原因我无法让它工作。

    $(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

有一个更好的方法来查看复选框是否被选中:

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

它更健壮一些。