【问题标题】:Select all checkbox with icheck使用 icheck 选中所有复选框
【发布时间】:2015-04-30 15:37:18
【问题描述】:

我正在为复选框使用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');
});

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

Fiddle work

【问题讨论】:

    标签: jquery checkbox icheck


    【解决方案1】:
    // 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', ... 很棘手 - 它会触发其他处理并且每个复选框都未选中

    fiddle

    【讨论】:

    • 我已将您的代码放入我的小提琴中。看来,它仍然不能完美地工作。 jsfiddle.net/learner73/86x2bc2r/2
    • @user1896653 并稍微修复了处理程序
    • 有问题。请看截图。我希望,你会明白的。 i.imgur.com/ZlUHcuT.jpg
    • @user1896653 感谢您进行彻底的测试。是的,该代码非常泄漏。可以修复jsfiddle.net/vjf5ryhv,但它仍然很臭。要正确而不是共享状态,需要在 iCheck 调用中传递一些信息,但我没有找到方法
    • 感谢您的帮助。虽然,这可能不是很好的做法,但它似乎工作得很好。如果我没有找到任何其他好处,我会选择这个。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-11
    • 2018-01-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多