尝试切换复选框checked属性的值

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

Live example

修改

• 它应该做什么：

    

  单击.checkbox区域内的任何位置，input的checked属性的值应该从true切换为false，反之亦然。
  
  

• 它的作用：

    

  单击除（！）之外的.checkarea区域内的任何位置，输入切换值。单击输入时，值保持不相同

Answer 1

找到它。

我还必须添加这部分：

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

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