jQuery未能通过编程取消选中复选框

Question

简单的功能，我想根据更改顶层复选框切换选中/取消选中复选框。

问题是切换/点击事件处理程序有固有的问题。如果您尝试将这些处理程序绑定到输入复选框，则该框的默认检查行为将失败。

因此，我尝试以两种不同方式之一使用Change处理程序。

 $('input.all_neighborhoods').change(function(){ 
    if($(this).not(':checked')){ 
     $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').attr('checked','checked'); 
    } 
    else{ 
     $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').removeAttr('checked'); 
    } 

    }); 

在这里，第一次更改按照您的预期工作。所有兄弟复选框都被选中并检查。但是，当我再次点击取消选中时，什么都不会发生。事件处理程序不起作用。

然后我尝试这样做：

$('input.all_neighborhoods').change(function(){ 
    $(this).attr('checked', $(this).is(':checked') ? $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').attr('checked','checked'): $(this).removeAttr('checked').closest('li').siblings('li').find('input[name=neighborhood_id]').removeAttr('checked')); 
}); 

在这里，兄弟复选框有效切换。但是，主开关复选框保持选中状态。

这里的问题与他们是否都是兄弟姐妹有关，而主复选框不是父级？

Answer 1

（警告，无耻的自我推销提前）。我已经写了一个jQuery插件，为您处理所有这些混乱。没有必要重新发明轮子。

检查出来：http://mjball.github.com/jQuery-CheckAll/

---

如果你想坚持使用当前的方法，这里是如何解决这个问题：

$('input.all_neighborhoods').change(function() { 
    $(this).closest('li') 
     .siblings('li') 
     .find('input[name=neighborhood_id]').attr('checked', this.checked); 
} 

只是传递一个布尔值，.attr()。此外，由于每When to use Vanilla JavaScript vs. jQuery?不使用

$(this).is(':checked') 

而是使用

this.checked 

这是更少的字符写的，不需要任何jQuery的，并且是方式更有效。