JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/fronteed/iCheck/1.x/icheck.js"></script>
<input type="checkbox" id="check-all">All
<br>
<br>
<input type="checkbox" class="check">Checkbox 1
<br>
<input type="checkbox" class="check">Checkbox 2
<br>
<input type="checkbox" class="check">Checkbox 3
<br>
<input type="checkbox" class="check">Checkbox 4
<br>

CSS

.checkbox-default {
    display:inline-block;
    width:20px;
    height:20px;
    background:#eee;
}
.checkbox-default.checked {
    background:#aaa;
}

JavaScript

var triggeredByChild = false;

$('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default',
});

$('#check-all').on('ifChecked', function (event) {
    $('.check').iCheck('check');
    triggeredByChild = false;
});

$('#check-all').on('ifUnchecked', function (event) {
    if (!triggeredByChild) {
        $('.check').iCheck('uncheck');
    }
    triggeredByChild = false;
});
// Removed the checked state from "All" if any checkbox is unchecked
$('.check').on('ifUnchecked', function (event) {
    triggeredByChild = true;
    $('#check-all').iCheck('uncheck');
});

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