Question

当我点击一系列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);
});

第一个循环的进程运行正常，第一次迭代后停止工作。但是如果我使用.prop（）而不是.attr（），它运行正常。

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

任何人都可以解释这个原因吗？

Answer 1

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

然而，最重要的概念要记住检查属性是它与checked属性不对应。该 attribute实际上对应于defaultChecked属性和应该只用于设置复选框的初始值。该 checked属性值不随状态而变化复选框，而checked属性。因此，跨浏览器兼容的方式来确定是否选中了复选框使用该财产。

Answer 2

嘿.prop()和.attr()

之间存在典型差异

属性与属性

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

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

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

快乐编码：）

使用attr（）和使用prop（）设置检查状态

2 个答案: