Fancy Checkbox

Three state checkbox using FontAwesome and jQuery.

by Ashiqur Rahman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<div class="fancy-checkbox-holder">
    <label for="check-1" class="checked">
        <input type="checkbox" id="check-1" checked /> Checked input
    </label>
    <label for="check-2" class="unchecked">
        <input type="checkbox" id="check-2" /> Unchecked input
    </label>
    <label for="check-3" class="partial-checked">
        <input type="checkbox" id="check-3" /> Parital checked input
    </label>
    <label for="check-4" class="partial-checked">
        <input type="checkbox" id="check-4" /> Another checked partially
    </label>
    <label for="check-5" class="checked">
        <input type="checkbox" id="check-5" checked /> This one is checked
    </label>
</div>

SCSS

.fancy-checkbox-holder {
    display: block;
    label {
        display: block;
        line-height: 1.2em;
        i.fa {
            &:before {
                content: "\f096";
                /* Unchecked */
            }
        }
        &.partial-checked {
            i.fa {
                &:before {
                    content: "\f147";
                    /* Minus */
                }
            }
        }
        &.checked {
            i.fa {
                &:before {
                    content: "\f046";
                    /* Checked */
                }
            }
        }
    }
}

JavaScript

$(document).ready(function() {
    $('label', $('.fancy-checkbox-holder')).children('input[type="checkbox"]').hide();
    $('label', $('.fancy-checkbox-holder')).prepend('<i class="fa fa-fw"></i>');
    $('label', $('.fancy-checkbox-holder')).on('click', function(e) {
    	e.stopPropagation();
        e.preventDefault();
        $(this).removeClass('partial-checked').removeClass('unchecked').toggleClass('checked');
        if($(this).hasClass('checked')) {
        	$(this).children('input[type="checkbox"]').attr('checked', 'checked');
        } else {
        	$(this).children('input[type="checkbox"]').removeAttr('checked');
        }
    })
});