Question

我正在编写一个自定义调查视图，用＆＃34;按钮替换复选框＆＃34;这些只是用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": ""
        });
    }
});

以下是转载的问题：http://jsfiddle.net/m8r4xp6b/

Answer 1

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

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

这是一个更新的jfiddle，它可以在不添加event.preventdefault方法或删除for属性的情况下工作。 http://jsfiddle.net/m8r4xp6b/21/

$('.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": ""});
    }
});

Answer 2

添加e.preventDefault();

$('.checkbox-select').click(function (e) {    
  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+ */
}

Link to jsfiddle

由于名为Event Bubbling and Capturing的机制，您的点击发生了两次。这意味着如果你发起一个父母的事件，那么即使他们有附加到它们的处理程序，它的孩子也会触发它。

Read more about here if you like

Answer 3

只需删除label即可。

$('.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": ""
    });
  }
});

input[type=checkbox] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="checkbox-select">
  
    <input id="id_0-tag_0" name="0-tag" type="checkbox" value="44" />
  
  Test Test
</li>

jQuery onClick事件有效，除非单击文本

3 个答案: