Javascript jqueryonclick事件有效，单击文本时除外

我正在编写一个自定义的测量视图，它将复选框替换为按钮，这些按钮只是用CSS渲染的区域

我试图在单击某个区域时触发事件。单击文本外部的区域时，会触发事件，但单击文本时，不会发生任何事情。我对几天前开始的jQuery非常陌生。我是不是遗漏了一些显而易见的东西？谢谢

$('.checkbox-select').click(function () {
    var checked_length = $(this).has(".checked").length;
    if (checked_length == 0) {
        $(this).find('[type=checkbox]').addClass('checked');
        $(this).find('[type=checkbox]').prop('checked', true);
        $(this).find('label').css({
            "font-style": "italic"
        });
        $(this).css("background-color", "#6CCACD");
    } else {
        $(this).find('[type=checkbox]').removeClass('checked');
        $(this).find('[type=checkbox]').prop('checked', false);
        $(this).css("background-color", "#67517A");
        $(this).find('label').css({
            "font-style": ""
        });
    }
});

下面是重现的问题：

添加e.preventDefault

同时使您的标签不可选择：

label {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

由于一种称为事件冒泡和捕获的机制，您的单击发生了两次。这意味着，如果您触发父级的事件，则其子级也将触发该事件，即使它们已附加该处理程序

只要去掉标签就行了。 $。选中复选框。单击函数{ var checked_length=$this.has.checked.length； 如果选中，则长度==0{ $this.find'[type=checkbox]'.addClass'checked'； $this.find'[type=checkbox]'.prop'checked'，true； $this.find'label'.css{ 字体：斜体 }; $this.cssbackground-color，6CCACD； }否则{ $this.find'[type=checkbox]'.removeClass'checked'； $this.find'[type=checkbox]'.prop'checked'，false； $this.cssbackground-color，67517A； $this.find'label'.css{ 字体样式： }; } }; 输入[类型=复选框]{ 显示：无； } 测试

---

之所以会发生这种情况，是因为标签使用了for属性，当您单击文本时，会导致事件触发两次。单击带有for属性的标签会导致选中或取消选中复选框，或者如果它是不同的输入类型，则会使其具有焦点

以上XGreen和Deepak提供的答案应该都有效

这是一个更新的JFIDLE，它在不添加event.preventdefault方法或删除for属性的情况下工作

---

我可以知道它行为不端的原因吗？如何通过移除标签来解决此问题？实际上，单击事件已触发两次。为什么会发生这种情况？该标签导致您的输入单击事件触发两次。如果您阻止默认，它将阻止默认冒泡行为。答案中解释了参考链接，非常感谢。对于我的具体情况，这是最好的答案，因为我正在使用一个从Django呈现的表单，而我对它的结构没有太多控制权。我真的很感激每个人都对一个新加入js的后端类型反应如此迅速！

label {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

$('.checkbox-select').click(function () {
    var litem = $(this);
    var chk = litem.find('[type=checkbox]');
    var lbl = litem.find('label');
    var checked = chk.is(':checked');
    if(!checked) {
      chk.addClass('checked');
      chk.prop('checked', true);
      lbl.css({"font-style": "italic"});
      litem.css("background-color", "#6CCACD");
    }
    else {
       chk.removeClass('checked');   
       chk.prop('checked', false);
       litem.css("background-color", "#67517A");
       lbl.css({"font-style": ""});
    }
});