JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<p>
    <input type="checkbox" name="1" class="styled green" />(green)</p>
<p>
    <input type="checkbox" name="2" class="styled red" checked/>(red)</p>
<p>
    <input type="checkbox" name="3" class="styled purple" />(purple)</p>

CSS

.checkbox, .radio {
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url("http://i48.tinypic.com/raz13m.jpg");
    display: block;
    clear: left;
    float: left;
}
.checked {
    background-position: 0px -50px;
}
.clicked {
    background-position: 0px -25px;
}
.clicked.checked {
    background-position: 0px -75px;
}
.green {
    background-color: green;
}
.red {
    background-color: red;
}
.purple {
    background-color: purple;
}

JavaScript

$(function () {

    $('input[type=checkbox]').each(function () {
        var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
        if ($(this).is(':checked')) {
            span.addClass('checked');
        }
        $(this).wrap(span).hide();
    });

    function doCheck() {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
            $(this).children().prop("checked", false);
        } else {
            $(this).addClass('checked');
            $(this).children().prop("checked", true);
        }
    }

    function doDown() {
        $(this).addClass('clicked');
    }

    function doUp() {
        $(this).removeClass('clicked');
    }
});