JS .checked vs jquery attr（’checked’），有什么区别？

我无法想象这一个。 根据W3 Schools ， checked属性设置或返回复选框的选中状态。

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

然而，使用道具确实有效。

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

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

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

 $('input')[0].checked

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

 $("").attr("checked") // "checked" $("").attr("checked") // "checked" $("").attr("checked") // "checked" $("").attr("checked") // undefined

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

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

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

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

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

在这种情况下，您需要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()检索属性。

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（）vs .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

$（’input’）返回一个JQuery对象，它没有checked属性。 你可以使用$（’input’）[0] .checked。

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

希望这可以帮助！！

Interesting Posts