来自 click() 的 click() 上的 jQuery 奇怪行为

Question

我在 jQuery 1.4 中遇到了点击事件的奇怪行为。这个想法是点击一个下拉列表（change()），然后使用复选框的 click() 函数反转复选框集合两次。< br> 如果我必须这样做，那是因为复选框上的 click 会更新其他字段，所以我想不要反转复选框 checked 属性，而是对所有复选框调用两次单击复选框。

尽管所有复选框都正确反转了两次，但我在 click 函数上使用的 .length 在操作过程中丢失了正确的计数，并且每次返回的值都比应有的多 1 。

为了清楚起见，代码的想法如下：

//The 'click' function
$('input:checkbox').click(function(){
    $(this).parent().find("input:checkbox:checked").length;//<- this one's not returning the right count
    //some code updating other fields thanks to the 'length' of the checkboxes
});

//The dropdown function
$('select.dropdown').change(function(){
    $(this).parent().find("input:checkbox").click();//Invert the first time
    $(this).parent().find("input:checkbox").click();//Invert a second time
});

当我手动检查和取消选中字段时，一切都工作正常，只是当下拉列表调用它时，长度计数错误。

这里有两种情况可以更深入地解释我遇到的问题：

1. 如果我从下拉列表中选择某些内容（长度失败），然后取消选中并重新选中复选框，则计数是正确的。
2. 如果我在 click() 函数末尾添加有错误的代码，除了在 javascript 调试器控制台上引发错误之外，它可以正常工作。顺便说一句，我无法保留这个解决方案，因为在这种情况下另一个函数失败了。

干杯，
尼古拉斯.

Answer 1

如果您想反转复选框的选中状态，可以执行以下操作：

$(this).parent().find("input:checkbox").attr('checked', function(i, sel) {
    return !this.checked;
});

请注意调用.find("input:checkbox")。 attr(... 将反转所有复选框。因此，如果您调用它两次，它们将反转两次，让您看起来什么也没发生。

---

编辑：

如果您只想触发处理程序，则可以使用 .triggerHandler() 它将触发点击而不触发默认行为元素的

$(this).parent().find("input:checkbox").triggerHandler('click');

http://api.jquery.com/triggerhandler/

Answer 2

假设复选框和下拉列表共享相同的表单，为什么不这样做...

function countCheckedBoxes(theForm){
    theForm.find("input:checkbox:checked").length;//<- this one's not returning the right count 
    //some code updating other fields thanks to the 'length' of the checkboxes 
}); 

//The 'click' function 
$('input:checkbox').click(function(){ 
    countCheckedBoxes($(this.form));
}); 

//The dropdown function 
$('select.dropdown').change(function(){ 
    countCheckedBoxes($(this.form));
}); 

那么您不依赖于以嵌套方式处理点击事件（我认为这是问题所在）并且您正在运行 'countCheckedBoxes() ' 显式地运行，而不是依赖于单击复选框的副作用。