javascript - attr() と prop() を使用してチェック状態を設定する

Question

一連の div をクリックしているときに、チェックボックスをオンまたはオフにしようとしています。たとえば、3 つの div のリストがあり、各 div は 1 つのチェック ボックスに対応しています。1 つの 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);
});

プロセスは最初のループで正常に実行され、最初の繰り返しの後に動作を停止します。しかし、.attr() の代わりに .prop() を使用すると、正常に動作します。

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

誰かこの理由を説明できますか??