JS .checked和jquery attr('checked')有什么区别？

Question

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

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

然而，使用prop就可以了。

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

这是一个基于数据库值选中复选框的示例。

- Jacob Raccuia

---

一个是jQuery，另一个不是。 - Kyle Weller

使用.prop()替换.attr()，因为.prop()更快。 - icaru12

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。

- Dennis

---

如果你想要实际检查属性，你会使用 attr 还是 $('input')[0].getAttribute('checked')？ - RobG

@RobG 我个人倾向于使用原始的DOM而不是jQuery，但这取决于情况。而且checked是一个糟糕的例子，因为值并不重要 - 它是一个布尔属性。 - Dennis

@RobG: jQuery对布尔属性做了一些处理，如果您想要真正的值，那么您必须使用getAttribute。 - Blender

是的，jQuery的attr一直存在问题，只是在胡闹。jQuery的错误在于试图使属性等同于属性。 - RobG

为什么我使用 attr 和 [0].checked 时会有差异？ 当我使用 [0].checked = true 时，复选框被选中了，但是当我尝试通过 removeAttr 取消选中后三次使用 attr("checked","checked")，我发现第三次复选框没有被选中，但我跟踪了对象，发现 checked="checked" 存在，但 checked=false 也存在。 - Ankit Sharma

Answer 2

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

来自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（布尔值），将随复选框状态而改变 $(elem).prop("checked") ==== true（布尔值），将随复选框状态而改变

elem.getAttribute("checked")====="checked" (字符串) 复选框的初始状态；不会改变

$(elem).attr("checked") (1.6) ====="checked" (字符串) 复选框的初始状态；不会改变

$(elem).attr("checked") (1.6.1+) ========"checked" (字符串) 将随复选框状态而改变

$(elem).attr("checked") (pre-1.6) =======true (布尔值) 随复选框状态改变

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

http://jsperf.com/is-checked-vs-attr-checked-checked/7上的差异/is-checked-vs-attr-checked-checked/7

此外，了解元素属性和属性的含义，请参考http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/和http://jsperf.com/is-checked-vs-attr-checked-checked/7。

- Rohan Kumar

Answer 3

checked 是 DOM 对象的属性，而非 jQuery 对象的属性。要使其起作用，您需要获取 DOM 对象：

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

你也可以使用.is(':checked')来实现。

- Blender

Answer 4

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

- phnkha

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

希望这能有所帮助！

- asifsid88