<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="container"> <button id="master" class="btn btn-light"> <i class="far fa-square"></i> Master Checkbox </button><br> <button id="chk-0" class="check btn btn-light"> <i class="far fa-square"></i> Checkbox 1 </button><br> <button id="chk-1" class="check btn btn-light"> <i class="far fa-square"></i> Checkbox 2 </button><br> <button id="chk-2" class="check btn btn-light"> <i class="far fa-square"></i> Checkbox 3 </button> <br> <button id="chk-3" class="check btn btn-light"> <i class="far fa-square"></i> Checkbox 4 </button> </div>

$(document).ready(function(){ var mastercheck = false; // Checkboxes array: var checks = [false, false, false, false]; $('#master').click(function(){ mastercheck = !mastercheck; for(var i = 0; i<checks.length; i++){ checks[i] = mastercheck; } updateCheckboxes(); }); $('.check').click(function(){ var pos = $(this).attr('id').replace('chk-',''); checks[pos] = !checks[pos]; updateCheckboxes(); }); function updateCheckboxes() { var count = 0; for(var i = 0; i<checks.length; i++){ if (checks[i]) { count++; $('#chk-'+i).find('i').removeClass('fa-square'); $('#chk-'+i).find('i').addClass('fa-check-square'); }else { $('#chk-'+i).find('i').removeClass('fa-check-square'); $('#chk-'+i).find('i').addClass('fa-square'); } } // Tri-state if(count === checks.length){ mastercheck = true; $('#master').find('i').removeClass('fa-square'); $('#master').find('i').removeClass('fa-minus-square'); $('#master').find('i').addClass('fa-check-square'); }else if (count > 0) { mastercheck = false; $('#master').find('i').removeClass('fa-square'); $('#master').find('i').removeClass('fa-check-square'); $('#master').find('i').addClass('fa-minus-square'); }else { mastercheck = false; $('#master').find('i').removeClass('fa-minus-square'); $('#master').find('i').removeClass('fa-check-square'); $('#master').find('i').addClass('fa-square'); } } });