使用attr(）与使用prop(）设置检查状态

setting checked state using attr() vs using prop()

本文关键字：设置 检查 状态 prop attr 使用      更新时间：2023-09-26

当我点击一系列div时，我试图选中和取消选中框。例如，我有一个包含三个div的列表，每个div对应一个复选框。当我选择一个div时，我应该选中一个框，然后用上一次单击取消选中之前选择的框。

这是我的html

<div class="trigger">1</div>
<div class="trigger">2</div>
<div class="trigger">3</div>
<input id="one" type="checkbox">
<input id="two" type="checkbox">
<input id="three" type="checkbox">

和js

$('.trigger').click(function(){
    $('input[type=checkbox]').attr('checked', false);
    $('input[type=checkbox]').eq($(this).index('.trigger')).attr('checked', true);
});

该过程在第一个循环中运行良好，在第一次迭代后停止工作。但如果我使用.pr（）而不是.attr（），它就可以正常工作。

$('.trigger').click(function(){
    $('input[type=checkbox]').prop('checked', false);
    $('input[type=checkbox]').eq($(this).index('.trigger')).prop('checked', true);
});

有人能解释一下原因吗？？

文档中的以下段落解释了这种行为：

然而，关于检查属性是它与选中的属性不对应。这个属性实际上对应于defaultChecked属性，并且应仅用于设置复选框的初始值。这个选中的属性值不会随复选框，而选中的属性会这样做。因此跨浏览器兼容的方法来确定复选框是否被选中使用该属性。

.prop()和.attr() 之间存在显著差异

属性与属性

属性和属性之间的差异在特定情况下可能很重要在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致**从jQuery 1.**6开始，.pr（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected应使用.pro（）方法进行检索和设置在jQuery 1.6之前，可以使用.attr（）方法检索这些属性，但这不在attr的范围内这些没有相应的属性，只是属性。

注意：有关更多信息，请查看官方jQuery网站http://api.jquery.com/prop/

快乐编码：）

相关文章：