Question

我正在编写一些javascript（jQuery），它允许包含复选框的div，当单击时，将切换复选框元素。但是，我遇到的问题是，当你点击复选框时，它不起作用，因为它被切换两次（至少我认为这是发生了什么）。

以下是代码：

$('.checkbox-wrapper').click(function(){
    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

如何点击此复选框正常工作，但如果您点击周围区域，它会切换复选框？

解决方案：

感谢jAndy的评论，通过检查event.target属性来说明如何做到这一点：

$('.checkbox-wrapper').click(function(e){
    if( e.target.nodeName === 'INPUT' ) {
        e.stopPropagation();
        return;
    }

    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

正如其他人所指出的那样，这可能不是最好的例子，因为你通过使用label标签而不是div标签包装复选框来获得相同的功能（不需要javascript）。 Demo

Answer 1

检查event.target属性。

target属性可以是为事件或其后代注册的元素。将event.target与this进行比较通常很有用，以确定是否因事件冒泡而处理了事件。

Answer 2

试试这个

$('.checkbox-wrapper').click(function(e){
   if(!$(e.target).is(":checkbox")){
     var $checkbox = $(this).find('input[type="checkbox"]');
     if ($checkbox.is(':checked')) {
         $checkbox.attr('checked', false);
     } else {
         $checkbox.attr('checked', true);
     }
   }
});

Answer 3

尝试在其周围包裹<label>。

Answer 4

听起来你没有停止冒泡到父元素的事件

How to stop event bubbling on checkbox click

Javascript：单击包装元素但不是子元素

解决方案：

4 个答案: