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

StackOverflow https://stackoverflow.com/questions/1808198

题

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

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

有帮助吗？

解决方案

更改

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

到

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

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

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

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

有关详细信息，请参阅比较运营商

其他提示

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

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

它更健壮。

  

if（$（this）.attr（＆quot; checked＆quot;）===＆quot; true＆quot;）

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

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

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

或更简单，完全等同于：

if (this.checked)

最好的是

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

查看此文章，了解=，==和==之间的区别=在javascript中。或者对js中的平等运算符这个。

尝试更改此内容：

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

到此：

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top