Function "select all" and iCheck

Question

I want to implement a "Select all" using iCheck.

This is what I've done so far:

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

Fiddle: jsfiddle.net/N7uYR/1/

I want that when "Check Box 1", "Check Box 2", "Check Box 3", "Check Box 4" are selected, "Select all" also gets selected.

Exactly like this: jsfiddle.net/ivanionut/N7uYR/

How can I do this?

Answer 1

Here's what I came up with.

$(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

For anyone still struggling with this, I've altered the accepted answer https://stackoverflow.com/a/17821003/3061836) from Dzulqarnain Nasir a bit.

I've changed the removeProp method to the prop method:

checkAll.removeProp('checked');

Is altered to

checkAll.prop('checked', false);

The removePropmethod didn't work for me, but setting the checked property to false worked.

At the time of writing, I'm using iCheck 1.0.2 with jQuery 2.1.4