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

Question

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

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

但是，使用 prop 确实有效。

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

这是针对基于数据库值选中的复选框。

Answer 1

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基于属性是否存在

Answer 2

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

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

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

Answer 3

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

来自 http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/

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

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)更改为复选框状态

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

http://jsperf.com/is-checked-vs-attr-checked-checked/7/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-已检查/7

Answer 4

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

Answer 5

$('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();

希望这可以帮助！！