javascript - 如何绑定(bind)点击来切换复选框？

Question

给定 LI 列表，每个 LI 都包含一个复选框，如下所示:

<li class="contact">
    <input type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <div class="content">
        <cite>Baby James</cite>
    </div>
</li>

我希望能够在单击 LI 时切换复选框，而不仅仅是单击复选框时切换。我得到了这个作品，你可以在这里看到:

http://jsfiddle.net/xgB5X/2/

问题是，当点击LI切换复选框时，直接点击复选框是没有损坏的。单击复选框不再进行切换。有什么建议可以让它发挥作用吗？谢谢

Answer 1

为什么不使用label标签？

<li class="contact">
    <input id='input1' type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <label for='input1'>Baby James</label>
</li>

DEMO