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

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

FIDDLE

Answer 5

几点说明：

使用.prop（）代替.attr（）（它也更容易在其上分辨真/假，必须通过所有浏览器互相通过。

您可以在click（）中检查e.srcElement的classname of 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);
   }

});

jsFiddle

Answer 6

即使我认为你应该使用一个标签，这是方法工作

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

FIDDLE

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

6 个答案: