通过单击一系列div来选中和取消选中复选框

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

第一个循环的进程运行正常，第一次迭代后停止工作。这是小提琴。无法弄清楚我做错了什么

http://jsfiddle.net/sghoush1/GS7p8/5/

Answer 1

尝试使用.prop()代替.attr()

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

演示：Fiddle

Answer 2

尝试使用prop而不是attr

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