jQuery 无法以编程方式取消选中复选框

Question

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

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

所以，我尝试以两种不同的方式之一使用更改处理程序。

     $('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，并且方式更高效。