点击父级元素时使用jQuery切换复选框状态

Question

我有以下代码示例：http://jsfiddle.net/sX3w9/

$('.item').on('click', function() {
            var checkbox = $(this).find('input');
            checkbox.attr("checked", !checkbox.attr("checked"));    
            $(this).toggleClass('selected');
        });

用户应该能够点击

和/或其中的复选框，并且它应该选中或取消选中复选框并添加或删除所选类别的div。

当点击div时，它可以工作，但是点击复选框会立即取消选中...

- Cameron

---

你想让复选框做什么？ - steo

请查看此链接：http://jsfiddle.net/sX3w9/11/ - rab

Answer 1

请尝试以下代码：

$('.item').on('click', function() {
            var checkbox = $(this).find('input');
            checkbox.attr("checked", !checkbox.attr("checked"));    
            $(this).toggleClass('selected');
        });
$(".item input").on("click", function(e){
    e.stopPropagation();
    $(this).parents(".item").toggleClass('selected');
});

问题在于当你勾选复选框时，会触发div点击事件，导致复选框再次取消勾选。

- cycaHuH

---

一个非常好的解决方案，但对我来说它使用.prop()函数起作用了，因为在第一次点击后，复选框没有获得'checked'属性。 - chosta

Answer 2

你只需要检查点击事件的目标，如果它是一个复选框，就不需要手动更改 checked 属性：

$(function () {
    $(".item").on("click", function (e) {
        if (!$(e.target).is(':checkbox')) {
            var $checkbox = $(this).find("input[type='checkbox']");
            $checkbox.click();
        }
        $(this).toggleClass('selected');
    });
}

注意: 您可以使用$checkbox.prop("checked", !objCheckbox.prop("checked"));来切换复选框，但如果您有仅在复选框的onclick触发事件的情况下，$checkbox.click();效果最佳。

- John Washam

Answer 3

这是因为你的复选框位于 div 内部...它正在获取其父 div 的点击事件.. 事件冒泡。检查被点击的元素是否是目标元素.. 如果是，执行你想要的操作...

试试这个

$('.item').on('click', function(e) {
    if(e.target==this){
      var checkbox = $(this).find('input');
      checkbox.prop("checked", !checkbox.prop("checked"));  
      $(this).toggleClass('selected');
    }else{
       $(this).toggleClass('selected');
    }
});

在这里编辑代码

- bipen

---

我认为这不是 OP 想要的正确解决方案。如果你现在点击复选框，类 selected 不会被切换。 - dirkk

Answer 4

这个与标签一起使用效果很好：

<label for="checkboxid">
    <div class="item">
        <input type="checkbox" id="checkboxid" />
    </div>
</label>

$('#checkboxid').on('change', function() {
    $('.item').toggleClass('selected');
});

- Amani

Answer 5

这是我使用的：

$('body').on('click', '.item', function (event) {
    if (event.target.tagName.toLowerCase() == 'input') return;
    var objCheckbox = $(this).find("input[type=checkbox]");
    if (objCheckbox.length >= 1) {
        objCheckbox.prop("checked", !objCheckbox.prop("checked"));
    }
});
$('body').on('click', 'input[type=checkbox]', function (e) {
    $(this).parent().click();
    $(this).prop("checked", !$(this).prop("checked"));
});

如果页面上还有其他复选框，请勿绑定到 body。

- Parham

Answer 6

你的代码可以通过点击 div 来工作，但是由于这个原因，点击复选框会立即取消选择，所以你编写了一段代码 ！checkbox.attr("checked") 来取消选中复选框。

所以，如果想要实现这个功能，首先需要恢复 Checked 属性。

尝试此示例

另一个条件是，每次单击复选框都会将单击事件绑定到 div 上。如果不想这样做，需要检查 clicked Element，可以使用 event.toElement。

尝试此示例

- Ishan Jain

Answer 7

当您单击复选框时，事件会触发两次。您需要停止在复选框上绑定事件，并仅在父元素上绑定事件，如下所示。

http://jsfiddle.net/sX3w9/15/

$('.item').on('click', function() {
var checkbox = $(this).find('input');

checkbox.click(function(e){
    e.stopPropagation();
}).attr("checked", !checkbox.attr("checked"));

$(this).toggleClass('selected');

});

- user2538586

---

每次点击 .item，它都会绑定到 input checkbox 子元素的点击事件。 - rab