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

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

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

小詹姆斯

我想能够切换的李点击复选框，而不仅仅是在复选框点击。我得到了这个作品，你可以在这里看到：

问题是，当点击LI切换复选框时，直接点击复选框是不会被破坏的。单击复选框不再切换。有什么建议可以让它工作吗？谢谢

检查这个

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

li

标记

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

---

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

您可以尝试类似的操作

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

---

为什么不使用

标签

标签

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

小詹姆斯

有几个注意事项：

使用.prop（）而不是.attr（）（在所有浏览器中都必须相互区分，因此更容易判断正确与否）

您可以在click（）中检查e.src元素中的类名称复选框

---

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

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

---

为什么不使用

标签

而不是

li

你是说在li内部使用一个标签吗？@AnApprentice，

元素的数量对我们来说无关紧要，特别是如果你什么都不说的话it@AnApprentice如果使用标签，单击标签会自动选中或取消选中复选框似乎没有人提到过这一点，但您是否只是尝试将事件绑定到.content上。使用

$（'.listview li.content'）

应该可以工作。然后，您需要添加

parent（）

以使用：

$（e.currentTarget）.parent（）.find（'.checkbox'）

谢谢，但是有两个绑定。是否要使用单个绑定来实现此功能？是的，执行if（e.srcmelement.className='checkbox'）{e.topPropagation（）；}谢谢，这里的魔力是“li>*”这到底是做什么的？thanks@AnApprentice所选元素的任何直接子元素。该选择器选择LI的任何直接子元素。*是通配符，>是子元素。因此我们说的是绑定单击liok的任何子元素，所以这里真正的魔法是如何找到复选框？出于某种原因，在我的代码中不起作用，仍然是trying…还更改了复选框选择器，因为上下文更改为子项而不是li.checkbox=$（this.closest（'li'）。find（'.checkbox'）；

$('.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);
   }

});

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