在父单击时使用jQuery切换Checkbox

Question

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

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

用户应该能够单击div.item和/或其中的复选框，它应该选中或取消选中该复选框，并从div中添加或删除所选的类。

它在单击div时有效，但单击该复选框会立即再次取消选中它...

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会发生并且它会再次取消选中checbox。

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")); 切换复选框，但如果您有只触发复选框的事件， $checkbox.click(); 效果最好。

Answer 3

那是因为你的复选框在div里面......它正在取其父div的事件.eventBubble（）。 检查被点击的元素是否是目标元素..如果是的话做你想要的东西...

尝试这个

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

在这里小提琴

Answer 4

这适用于标签：

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

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

Answer 5

您的代码可以使用div单击，但是由于这个原因，您可以立即单击复选框，编写代码!checkbox.attr("checked")以取消选中复选框。

因此，如果您想要执行此操作 - 首先需要还原Checked属性。

试试这个例子

还有另一个条件，每次点击复选框都会将click事件绑定到div。 因此，如果您不想要这个，您需要检查clicked Element 。 为此，您使用event.toElement 。

试试这个例子

Answer 6

这是我用过的：

$('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 。

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');

}）;