javascript - 如何绑定到单击以切换复选框？

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>

演示

Answer 2

http://jsfiddle.net/xgB5X/3/检查这个。

我添加了一些代码来阻止传播。这将阻止事件到达li标签。

$('input[type=checkbox]').on('click', function(e) {
    e.stopPropagation();
});

您的问题是，当单击复选框时，它正在更改其状态，但是当事件到达 li 标签时，它再次包含复选框，它正在更改其状态。

Answer 3

你可以试试这样的jsFiddle

$('.listview li > *').children().bind({
    click: function(e) {
        checkbox = $(this).closest('li').find('.checkbox');
        checkbox.attr('checked', !checkbox.is(':checked'));
    }
});​

Answer 4

$('.listview li').on('click', function(e) {
      var c = $('.checkbox', this);
      c.prop('checked', !c[0].checked);
}).find('.checkbox').on('click', function(e) {e.stopPropagation();});​​​​​

小提琴

Answer 5

几点注意事项：

使用 .prop() 而不是 .attr() （它也更容易判断真/假，必须通过所有浏览器相互连接。

您可以在 click() 中检查 e.srcElement 以获取您的复选框的类名。

$('.listview li').on('click', function(e) {

  if (e.srcElement.className === 'checkbox') {
      e.stopPropagation();   
      return;
  }

  checkbox = $(this).find(':checkbox');

   // Toggle Checkbox
   if (checkbox.prop('checked')) {
       checkbox.prop('checked', false);
   } else {
       checkbox.prop('checked', true);
   }

});

jsFiddle

Answer 6

即使我认为您应该为此使用标签，但这是有效的方法

$('.listview li').bind({
  click: function(e) {
      var checkbox = $(this).find('.checkbox').get(0);
      if (e.target == checkbox) return;
      checkbox.click();
  }
});

小提琴