功能"全选"和iCheck

Question

我想使用iCheck实现"全选" .

这是我到目前为止所做的:

$(function () {
    $('input').iCheck();
    $('input.all').on('ifChecked ifUnchecked', function(event) {
        if (event.type == 'ifChecked') {
            $('input.check').iCheck('check');
        } else {
            $('input.check').iCheck('uncheck');
        }
    });
    $('input.check').on('ifUnchecked', function(event) {
        $('input.all').iCheck('uncheck');
    });
});

小提琴:jsfiddle.net/N7uYR/1/

我希望当选中"Check Box 1","Check Box 2","Check Box 3","Check Box 4"时,"Select all"也会被选中.

正是这样的:jsfiddle.net/ivanionut/N7uYR/

我怎样才能做到这一点？

Answer 1

这就是我想出来的.

$(function () {
    var checkAll = $('input.all');
    var checkboxes = $('input.check');

    $('input').iCheck();

    checkAll.on('ifChecked ifUnchecked', function(event) {        
        if (event.type == 'ifChecked') {
            checkboxes.iCheck('check');
        } else {
            checkboxes.iCheck('uncheck');
        }
    });

    checkboxes.on('ifChanged', function(event){
        if(checkboxes.filter(':checked').length == checkboxes.length) {
            checkAll.prop('checked', 'checked');
        } else {
            checkAll.removeProp('checked');
        }
        checkAll.iCheck('update');
    });
});

的jsfiddle

Answer 2

对于仍在努力解决这个问题的人,我已经改变了Dzulqarnain Nasir 的接受答案/sf/answers/1247470241/.

我已经将removeProp方法更改为prop方法:

checkAll.removeProp('checked');

改为

checkAll.prop('checked', false);

该removeProp方法对我不起作用,但将checked属性设置为false.

在撰写本文时,我正在使用iCheck 1.0.2和jQuery 2.1.4