0

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

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

4

2 回答 2

2

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

尽管如此，关于checked 属性最重要的概念是它不对应于checked 属性。该属性实际上对应于 defaultChecked 属性，应该只用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变，而选中的属性会。因此，确定是否选中复选框的跨浏览器兼容方法是使用该属性。

于 2013-07-29T07:08:27.470 回答
1

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

属性与属性

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

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

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

快乐编码:)

于 2013-07-29T06:55:10.357 回答