JSFiddle - React, Tailwind, and code Playground

by learner73

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 1<br>
<input type="checkbox" class="check"> Checkbox 1<br>
<input type="checkbox" class="check"> Checkbox 1<br>

CSS

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

.checkbox-default.checked {
    background:#aaa;
}

JavaScript

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

$('#check-all').on('ifChecked', function(event) {
	$('.check').iCheck('check');
});
$('#check-all').on('ifUnchecked', function(event) {
	$('.check').iCheck('uncheck');
});
// Removed the checked state from "All" if any checkbox is unchecked
$('#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');
});