6

我正在为复选框使用iCheck插件。我在那里放了一个“全选”功能。结构:

  • 全选
  • 复选框 1
  • 复选框 2
  • 复选框 3

它工作正常,就像选中“全选”时一样,所有复选框都会被选中。当取消选中“全选”时,所有复选框都将取消选中。但是,在选中“全选”后,如果取消选中任何复选框,则“全选”也应自动取消选中,因为此时所有复选框都未选中。

为了做到这一点,我写了这个:

$('#check-all').on('ifChanged', function(event){
    if($('.check').filter(':checked').length == $('.check').length) {
        $('#check-all').iCheck('check');
    } else {
        $('#check-all').iCheck('uncheck');
    }
    $('#check-all').iCheck('update');
});

但是,在放置此代码后,我的复选框无法正常工作,例如“全选”不适用于单击,它经常需要多次单击。当任何单个复选框未选中时,“全选”也不会取消选中。代码有什么问题?如何正确书写?

小提琴工作

4

1 回答 1

18
// Remove the checked state from "All" if any checkbox is unchecked
$('.check').on('ifUnchecked', function (event) {
    $('#check-all').iCheck('uncheck');
});

// Make "All" checked if all checkboxes are checked
$('.check').on('ifChecked', function (event) {
    if ($('.check').filter(':checked').length == $('.check').length) {
        $('#check-all').iCheck('check');
    }
});

处理$('#check-all').on('ifUnchecked', ...虽然很棘手 - 它会触发其他处理并且每个复选框都未选中

小提琴

于 2015-02-27T20:46:12.807 回答