$(elem).attr("checked")返回相反的结果

Question

点击复选框应该会弹出"checked"提示框（如果已勾选），反之则应该弹出"not checked"提示框。以下是代码：

<input type = "checkbox" id = "all" value="all" /> MyCheckbox

 <script src="jquery-2.1.4.js"></script>
<script type="text/javascript">
    $("input[type=checkbox]").click(function(){
    if ($(this).attr("checked")) {   
alert("checked");
}
else{
alert("not checked");
}
});
</script>

最初复选框未被选中。当我点击它时，调试器显示其已选中值为true。现在控制应该进入if {}块，因为其值为true，但实际上进入了else{}块。（我正在使用断点）

为什么会发生这种情况？请帮忙，我已经尝试了几个小时。

- mustafa1993

---

你也可以使用.prop()。关于attr()和prop()之间的区别的好答案可以在这里找到。 - dingo_d

怎么不行呢？您可以使用.prop("checked", true)来检查复选框是否被选中。编辑：好的，上面的评论已经被删除了。这个评论是针对之前的评论的... - dingo_d

http://api.jquery.com/prop/该页面甚至有一个示例，展示了使用attr()和prop()的区别。 - sinisake

Answer 1

问题在于您检查的是不会在选中状态更改时被删除或添加的checked属性。这是您应该注意到属性和特性之间的细微差别。您需要比较复选框元素的checked属性，而不是特性。

此外，最好使用change事件处理程序（因为您不仅可以使用鼠标单击而且可以使用键盘来勾选复选框）。

$("input[type=checkbox]").change(function() {
    if (this.checked) {
        alert("checked");
    }
    else {
        alert("not checked");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "checkbox" id = "all" value="all" /> MyCheckbox

- dfsq

---

谢谢！(this.checked)和$(this).prop("checked")或if ($(this).is(":checked"))是相同的吗？ - mustafa1993

是的，它们是一样的，只是 jQuery 包装器。我会选择本地的东西，更短更清晰。 - dfsq

Answer 2

这个：

$(this).attr("checked") //in old versions of jquery this yield "checked" , 

返回 undefined，这是一个假值语句。

从 jQuery 1.6 开始，对于未设置的属性，.attr() 方法返回 undefined。

你可以使用：

if ($(this).is(":checked"))

或者

$(this).prop("checked")

- Royi Namir

Answer 3

自从jQuery 1.6版本以来，对于未设置的属性，.attr()方法返回undefined。要检索和更改表单元素的选中、禁用状态等DOM属性，请使用.prop()方法。

- NubPro