如果选中或取消选中,则更改复选框的父元素css

时间:2009-11-27 11:26:47

标签: javascript jquery forms checkbox

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

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

6 个答案:

答案 0 :(得分:5)

有一种更好的方法可以查看是否已选中复选框:

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

它更健壮。

答案 1 :(得分:2)

更改

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

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

您使用严格等于比较两种数据类型必须相同。

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

会告诉您它是布尔类型,并且您将它与字符串进行比较。

有关详细信息,请参阅Comparison Operators

答案 2 :(得分:2)

  

if($(this).attr(“checked”)===“true”)

attr不会读取HTML属性。这种方式具有欺骗性。如果它确实读取了属性,则checked的字符串值将为'checked'而不是'true'。但它没有那样做。

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

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

或更简单,完全等同于:

if (this.checked)

答案 3 :(得分:2)

最好的是

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

答案 4 :(得分:1)

尝试更改此内容:

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

到此:

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

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

答案 5 :(得分:1)

在javascript中查看关于=,==和===之间差异的article。或者this关于js中的相等运算符。