javascript - 通过单击一系列 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);
});

演示：小提琴

Answer 2

尝试使用 prop 而不是 attr

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