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

How to bind to a click to toggle a checkbox?

本文关键字：单击 复选框 何绑定 绑定      更新时间：2024-02-11

给定一个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切换复选框时，直接点击复选框不会被破坏。单击复选框将不再进行切换。有什么建议可以让它发挥作用吗？感谢

为什么不使用label标记？

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

演示

http://jsfiddle.net/xgB5X/3/检查一下。

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

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

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

几个注意事项：

使用.pr（）而不是.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

您可以尝试这样的操作jsFiddle

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

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

尽管我认为你应该为此使用标签，但这里是工作的方法

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

FIDDLE

相关文章：