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

fiddle here

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属性。

Try This Example

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

Try This Example

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

}）;

在父单击时使用jQuery切换Checkbox

7 个答案: