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')

它更健壮。

Answer 2

更改

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

到

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

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

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

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

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

Answer 3

if（$（this）.attr（“checked”）===“true”）

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

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

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

或更简单，完全等同于：

if (this.checked)

Answer 4

最好的是

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

Answer 5

尝试更改此内容：

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

到此：

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

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

Answer 6

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

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

6 个答案: