4

我有以下代码示例：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 时起作用，但单击复选框会立即再次取消选中它...

4

7 回答 7

8

试试下面的代码：

$('.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 并再次取消选中复选框。

于 2013-07-01T10:14:55.440 回答
4

您需要做的就是检查单击的事件目标，如果是复选框，则不要手动更改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();效果最好。

于 2015-07-01T20:38:42.433 回答
0

这是我使用的：

$('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如果您的页面上有其他复选框，请不要绑定到。

于 2013-10-29T22:58:13.460 回答
0

您的代码可与 div click 一起使用，但单击复选框会立即取消选中，因此您编写了一个代码!checkbox.attr("checked")来取消选中复选框。

所以，如果你想做这项工作——首先你需要恢复Checked属性。

试试这个例子

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

试试这个例子

于 2013-07-01T11:07:04.833 回答
0

那是因为由于您的复选框位于 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');
    }
});

在这里摆弄

于 2013-07-01T10:12:52.747 回答
0

这适用于标签：

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

$('#checkboxid').on('change', function() {
    $('.item').toggleClass('selected');
});
于 2013-07-01T10:19:14.017 回答
-2

单击复选框时会触发该事件两次。您需要停止在复选框上绑定的事件，并仅像这样将事件绑定在父元素上。

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

});

于 2013-07-01T10:14:57.973 回答