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

【问题标题】：Changing checkbox's parent element css if checked or unchecked如果选中或未选中，更改复选框的父元素 css
【发布时间】：2010-12-20 23:03:38
【问题描述】：

基本上我在 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 的背景更改为绿色。

我还是新手，不知道这里可能出了什么问题，现在已经想弄清楚几个小时了。这么简单的事情，却无法让它发挥作用。

【问题讨论】：

标签： javascript jquery forms checkbox

【解决方案1】：

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

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

它更健壮一些。

【讨论】：

谢谢，这个和另一个一样好用，但更简单一些。

【解决方案2】：

改变

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

到

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

由于您使用严格相等进行比较，因此两种数据类型必须相同。

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

会让您知道它是 boolean 类型，并且您正在将其与字符串进行比较。

欲了解更多信息，请参阅Comparison Operators

【讨论】：

谢谢，这很有魅力。而且我不得不切换颜色值，由于某种原因，在单击复选框时，它给出了 if 内部的值，而不是另一个值。这可能是什么原因？

【解决方案3】：

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

attr 不读取 HTML 属性。那样是骗人的。如果它确实读取了属性，则checked 的字符串值将是'checked' 而不是'true'。但它并没有这样做。

它实际上做的是读取 JavaScript 对象属性，仅在它们不同的几个地方使用属性名称而不是属性名称。 checked 属性为您提供一个布尔值，因此无需将其与任何内容进行比较，您只需说：

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

或者，甚至更简单，完全等价的：

if (this.checked)

【讨论】：

【解决方案4】：

最好的是

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

【讨论】：

【解决方案5】：

查看article，了解 JavaScript 中 =、== 和 === 之间的区别。或者 this 在 js 中的相等运算符。

【讨论】：

【解决方案6】：

尝试改变这个：

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

到这里：

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

这会将任何非布尔值转换为布尔值，并允许您的类型安全比较工作，即使返回字符串“true”（如果返回字符串 false，它将评估为 true....）

【讨论】：