Question

我点击后应用以下代码使表行选中/取消选中子复选框。现在我发现当点击行内的复选框本身时，它会进行检查。可能是它检查点击（标准功能），然后jquery选择点击事件并取消选中它？我该如何解决这个问题？

//check on div click
$("tr").live("click",function() {
    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
        checkbox.attr("checked","true");
    } else {
        checkbox.attr("checked","");
    }
});

Answer 1

我怀疑点击事件是从复选框冒泡到tr。尝试添加此代码：

$('tr input[type=checkbox]').click(function(e){
        e.stopPropagation();
});

修改

这是一个例子：http://jsfiddle.net/GSqNv/

Answer 2

检查来电者的目标不是复选框

$("tr").live("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
       checkbox.attr("checked","true");
    } else {
       checkbox.attr("checked","");
    }
});

DEMO http://jsfiddle.net/7Bze7/

上面的代码检查事件的发件人不是复选框。

Answer 3

除了给定的解决方案，将复选框设置为oposite状态不是更好吗？例如：

var _current_state = checkbox.attr("checked");
checkbox.attr("checked") = !_current_state;

Answer 4

怎么样：

return false;

因为它与输入两者相同：

e.preventDefault(); 
e.stopPropagation();

我相信这是去 - 不是吗？

Answer 5

我发现您只需将div包装在标签中即可完成此操作。如果div中的内容是您要更改的内容，则不起作用，但是它将选中该复选框。

单击一个div以选中/取消选中一个复选框

5 个答案: