JS .checked vs jquery attr('checked')，有什么区别？答案

【问题标题】：JS .checked vs jquery attr('checked'), what is the difference?JS .checked vs jquery attr('checked')，有什么区别？
【发布时间】：2013-02-11 10:40:16
【问题描述】：

我想不出来这个。根据W3 Schools，checked 属性设置或返回复选框的选中状态。

那么为什么$('input').checked ? $('div').slideDown() : $('div').slideUp(); 不起作用？

但是，使用 prop 确实有效。

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();

这是用于根据数据库值选中的复选框。

【问题讨论】：

一个是 jQuery，另一个不是
将 .attr() 替换为 .prop()，因为 .prop() 更快

标签： javascript jquery attr checked

【解决方案1】：

checked 是 DOM 对象的属性，而不是 jQuery 对象的属性。要使其工作，您必须获取 DOM 对象：

$('input')[0].checked;

你也可以.is(':checked')。

【讨论】：

【解决方案2】：

checked 是一个 DOM 元素属性，所以在 DOM 元素上使用它而不是 jQuery 对象。

$('input')[0].checked

如果您有一个 jQuery 对象，请使用 prop 而不是 attr，因为您正在检查一个属性。仅供参考：

$("<input type='checkbox' checked='checked'>").attr("checked") // "checked"
$("<input type='checkbox' checked='foo'>").attr("checked") // "checked"
$("<input type='checkbox' checked>").attr("checked") // "checked"
$("<input type='checkbox'>").attr("checked") // undefined

而[0].getAttribute("checked") 将返回实际值。

prop 将根据属性是否存在返回 true 或 false

【讨论】：

如果你想实际检查属性，你会使用attr还是$('input')[0].getAttribute('checked')？
@RobG 我个人倾向于使用原始 DOM 而不是 jQuery，但这取决于具体情况。 checked 是一个不好的例子，因为值无关紧要 - 它是一个布尔属性。
@RobG：jQuery 对布尔属性做了一些处理，所以如果你想要真正的值，你必须使用getAttribute。
是的，jQuery 的attr 已经永远坏掉了，只是在胡闹。 jQuery 的错误在于试图使属性等同于属性。
为什么当我使用attr 和[0].checked 时会有差异。当我使用[0].checked = true 时，复选框被选中，但是当我在通过removeAttr 取消选中后尝试attr("checked","checked") 三次时然后我发现第三次复选框没有被选中，但我跟踪了对象，我发现checked="checked" 在那里但checked = false 也在那里..

【解决方案3】：

$('input') 返回一个 JQuery 对象，它没有检查属性。您可以使用 $('input')[0].checked。

【讨论】：

【解决方案4】：

$('input').attr('checked') 已过时，应该使用$('input').prop('checked')
此外，$('input').checked 将不起作用，因为$('input') 是 jquery 对象，checked 是属性，所以 jquery 提出了$('input').prop('checked') 来访问该属性。

但是，要将 jQuery 对象转换为 DOM 对象，您需要这样做
$('input')[0].checked 这将成为 DOM 对象，然后您可以使用 . 直接访问该属性

但是使用 jquery 来访问属性应该使用这个：

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();

希望这会有所帮助！

【讨论】：

【解决方案5】：

在这种情况下，您需要prop() 而不是attr()，在您的代码中用prop() 替换对attr() 的调用通常会起作用。

发件人 http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/

属性和属性之间的区别在特定情况下可能很重要。 在 jQuery 1.6 之前，.attr() 方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。 从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr()retrieves 属性。

elem.checked ==== true (Boolean) 会随着复选框的状态而改变

$(elem).prop("checked") ==== true (Boolean) 会随着复选框的状态而改变

elem.getAttribute("checked")====="checked" (String)复选框的初始状态；不变

$(elem).attr("checked") (1.6) ====="checked" (String)复选框的初始状态；不变

$(elem).attr("checked") (1.6.1+) ========"checked" (String) 会随着复选框的状态而改变

$(elem).attr("checked") (pre-1.6) =======true (Boolean) 已更改为复选框状态

此外，此网址将帮助您更多地了解您的查询.prop() vs .attr()

/is-checked-vs-attr-checked-checked/7 与 http://jsperf.com/is-checked-vs-attr-checked-checked/7 的区别

还要了解The elements atttribute and properties参考http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/ http://jsperf.com/is-checked-vs-attr-checked-checked/7

【讨论】：