jquery - 试图切换复选框选中属性的值

Question

我正在尝试针对具有“复选框”类的各种块，它们都包含一个标签和一个复选框类型的输入。当单击 .checkbox 区域内的任意位置（输入除外）时，“选中”值被切换，当单击输入时，该值保持不变。有人可以向我解释为什么会这样（为什么单击输入时，值不会切换）？

HTML

<div class="checkbox">
    <label for="a">a</label>
    <input type="checkbox" name="a" checked>
</div>
<div class="checkbox">
    <label for="b">b</label>
    <input type="checkbox" name="b">
</div>

jQuery

function toggleProp(el) {
    $(el).prop("checked", !el.prop("checked"));
}

$(".checkbox").click(function () {
    toggleProp($(this).find("input"));
});

活生生的例子

编辑：

• 它应该做什么：

  单击 .checkbox 区域内的任意位置，输入的选中属性的值应该已从 true 切换为 false，反之亦然。
  
  

• 它能做什么：

  单击除 (!) 之外的 .checkarea 区域内的任意位置会切换值。单击输入时，值保持不变，这是不想要的

Answer 1

找到了。

我还必须添加这部分：

$(".checkbox input").click(function(e) {
    e.stopPropagation();
});

这样，当点击输入时，它不会触发其父级的点击事件