javascript JS .checked vs jquery attr('checked')，有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15081335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS .checked vs jquery attr('checked'), what is the difference?
提问by Jacob Raccuia
I can't figure this one out. According to W3 Schools, the checked property sets or returns the checked state of a checkbox.
我无法弄清楚这一点。根据W3 Schools，checked 属性设置或返回复选框的选中状态。
So why does $('input').checked ? $('div').slideDown() : $('div').slideUp();not work?
那么为什么不起作用$('input').checked ? $('div').slideDown() : $('div').slideUp();呢？
Using prop however, does work.
然而，使用 prop 确实有效。
$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();
$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();
This is for a checkbox that is checked based on a database value.
这是针对基于数据库值选中的复选框。
回答by Dennis
checkedis a DOM element property so use it on DOM elements instead of jQuery objects.
checked是一个 DOM 元素属性，所以在 DOM 元素而不是 jQuery 对象上使用它。
$('input')[0].checked
if you have a jQuery object, use propinstead of attrsince you are checking a property. Just as a reference:
如果您有一个 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
Whereas [0].getAttribute("checked")will return the actual value.
而[0].getAttribute("checked")将返回实际值。
propwill return trueor falsebased on whether or not the attribute exists at all
prop将返回true或false基于该属性是否存在
回答by Blender
checkedis a property of the DOM object, not of the jQuery object. To make it work, you'd have to get the DOM object:
checked是 DOM 对象的属性，而不是 jQuery 对象的属性。为了让它工作，你必须得到 DOM 对象：
$('input')[0].checked;
You could also do .is(':checked').
你也可以这样做.is(':checked')。
回答by Rohan Kumar
In this case you need prop()rather than attr(),
replacing calls to attr()with prop()in your code will generally work.
在这种情况下，您需要prop()而不是attr()，在您的代码中替换对attr()with 的调用prop()通常会起作用。
Fromhttp://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/
来自http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr()method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop()method provides a way to explicitly retrieve property values, while .attr()retrieves attributes.
属性和特性之间的差异在特定情况下可能很重要。在 jQuery 1.6 之前，该.attr()方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从 jQuery 1.6 开始，该.prop()方法提供了一种在检索属性的同时显式检索属性值的方法.attr()。
elem.checked==== true (Boolean)Will change with checkbox state
elem.checked==== true (Boolean)将随复选框状态而变化
$(elem).prop("checked")==== true (Boolean)Will change with checkbox state
$(elem).prop("checked")====true (Boolean)将随复选框状态而变化
elem.getAttribute("checked")====="checked" (String)Initial state of the checkbox; does not change
elem.getAttribute("checked")======"checked" (String)复选框的初始状态；不会改变
$(elem).attr("checked") (1.6)====="checked" (String)Initial state of the checkbox; does not change
$(elem).attr("checked") (1.6)======"checked" (String)复选框的初始状态；不会改变
$(elem).attr("checked") (1.6.1+)========"checked" (String)Will change with checkbox state
$(elem).attr("checked") (1.6.1+)========"checked" (String)将随复选框状态而变化
$(elem).attr("checked") (pre-1.6)=======true (Boolean)Changed with checkbox state
$(elem).attr("checked") (pre-1.6)========true (Boolean)更改为复选框状态
Also this url will help you more about your queries .prop() vs .attr()
此外，这个 url 将帮助您更多地了解您的查询.prop() 与 .attr()
A difference of /is-checked-vs-attr-checked-checked/7on http://jsperf.com/is-checked-vs-attr-checked-checked/7
http://jsperf.com/is-checked-vs-attr-checked-checked/7/is-checked-vs-attr-checked-checked/7上的区别
Also to understand The elements atttribute and propertiesrefer http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/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-检查检查/7
回答by phnkha
$('input') returns a JQuery object and it doesn't have checked property. You can use $('input')[0].checked.
$('input') 返回一个 JQuery 对象，它没有检查属性。您可以使用 $('input')[0].checked。
回答by asifsid88
$('input').attr('checked')is outdated and one should use $('input').prop('checked')
Moreover, $('input').checkedwill not work as $('input')is the jquery object and checkedis the property so that is why jquery has come up with $('input').prop('checked')to access the property.
$('input').attr('checked')已经过时，应该使用$('input').prop('checked')
此外，$('input').checked不会像$('input')jquery 对象那样工作，并且checked是属性，所以这就是 jquery 想出$('input').prop('checked')访问该属性的原因。
However to convert jQuery object to DOM object you need to do$('input')[0].checkedthis becomes the DOM Object and then you can access the property directly with .
但是，要将 jQuery 对象转换为 DOM 对象，您需要这样做$('input')[0].checked成为 DOM 对象，然后您可以直接使用.
But with jquery to access the property one should use this:
但是使用 jquery 访问属性应该使用这个：
$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();
Hope this helps!!
希望这可以帮助！！
