$( elem ).attr("checked") 给出相反的结果[重复]答案

【问题标题】：$( elem ).attr("checked") giving opposite results [duplicate]$( elem ).attr("checked") 给出相反的结果[重复]
【发布时间】：2015-12-02 00:53:17
【问题描述】：

如果选中，单击复选框应该检查警报，如果没有检查，则不检查警报。代码如下：

<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{} 块。（我正在使用断点）。

为什么会这样。请帮助我尝试几个小时。

【问题讨论】：

您也可以使用.prop()。关于attr()和prop()之间区别的一个很好的答案可以找到here
怎么样？您可以使用.prop("checked", true) 来检查复选框是否被选中。编辑：好的，上面的评论被删除了。这条评论针对的是上一条……
api.jquery.com/prop 页面上甚至还有例子显示了使用 attr() 和 prop() 之间的区别。

标签： javascript jquery html debugging checkbox

【解决方案1】：

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

另外最好使用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

【讨论】：

谢谢！并且 (this.checked) 是否与 $(this).prop("checked") 或 if ($(this).is(":checked")) 相同？
是的，它是一样的，只是 jQuery 包装器。我会选择原生的东西，更短更清晰。

【解决方案2】：

这个：

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

产生 undefined 这是一个 Falsy 声明。

从 jQuery 1.6 开始，.attr() 方法返回未定义的属性没有设置的

你可以使用：

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

或

$(this).prop("checked")

【讨论】：

【解决方案3】：

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选中或禁用状态，请使用 .prop() 方法。

【讨论】：