Bootstrap Snippet Tri-state Checkboxes using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Tri-state Checkboxes"
Bootstrap 4.1.1 Snippet by JCAguilera

Related: See More

Questions / Comments:

"Tri-state Checkboxes" Bootstrap 4.1.1 Snippet by JCAguilera

Related: See More

Questions / Comments:

"Tri-state Checkboxes"
Bootstrap 4.1.1 Snippet by JCAguilera