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

Question

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

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

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

     $('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') );
}); 

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

这里的问题是否与它们都是 sibling 并且主要复选框不是父级这一事实有关？

Answer 1

(警告，前面无耻的 self 推销)。我编写了一个 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);
}

只需将 bool 值传递给.attr()。另外，根据 When to use Vanilla JavaScript vs. jQuery?不要使用

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

改为使用

this.checked

编写的字符更少，不需要任何 jQuery，并且效率更高。