JSFiddle - React, Tailwind, and code Playground

HTML

<label>
    <input type='checkbox' id='checkAll' name='name1' class='selectall' />
</label>
<label>
    <input type="checkbox" name="name2" value="1" class='check' />1</label>
<label>
    <input type="checkbox" name="name2" value="2" class='check' />2</label>
<label>
    <input type="checkbox" name="name2" value="3" class='check' />3</label>
<label>
    <input type="checkbox" name="" value="4" class='check' />4</label>
<label>
    <input type="checkbox" name="" value="5" class='check' />5</label>

CSS

.custom-checkbox {
	    width: 16px;
	    height: 16px;
	    display: inline-block;
	    position: relative;
	    z-index: 1;
	    top: 3px;
	    background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat;
	}
	.custom-checkbox:hover {
	    background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat;
	}
	.custom-checkbox.selected {
	    background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png") no-repeat;
	}
	.custom-checkbox input[type="checkbox"] {
	    margin: 0;
	    position: absolute;
	    z-index: 2;
	    cursor: pointer;
	    outline: none;
	    opacity: 0;
	    /* CSS hacks for older browsers */
	    _noFocusLine: expression(this.hideFocus=true);
	    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	    filter: alpha(opacity=0);
	    -khtml-opacity: 0;
	    -moz-opacity: 0;
	}

JavaScript

function customCheckbox(checkboxName) {
        var checkBox = $('input[name="' + checkboxName + '"]');
        $(checkBox).each(function () {
            $(this).wrap("<span class='custom-checkbox'></span>");
            if ($(this).is(':checked')) {
                $(this).parent().addClass("selected");
            }
        });
        $(checkBox).click(function () {
            $(this).parent().toggleClass("selected");
        });
    }
    $(document).ready(function () {
        customCheckbox("name1");
        customCheckbox("name2");

    })

    $("#checkAll").click(function () {
        if ($(this).is(':checked')) {
            if (($('input:checkbox').not(this).parent().hasClass('selected'))) {
                $('input:checkbox').not(this).prop('checked', true).parent().addClass('selected');
            }else{
                $('input:checkbox').not(this).prop('checked', true).parent().addClass('selected');
            }
        } else {
            $('input:checkbox').not(this).prop('checked', false).parent().removeClass('selected');
        }


    });