JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="checkBox" >
    Active?
    <input type="checkbox" /></div>

<div class="checkBox2"><input type="checkbox"/></div>

<div class="checkBox3"><input checked="checked" type="checkbox"/></div>
<div class="checkBox4"><input checked="checked" type="checkbox"/></div>

CSS

.cb {
    background:#e3e3e3;
    padding:4px 4px 4px;
    display:inline-block;
    margin:5px;
    border-radius:5px;
    border:1px solid #999;
    background: #e3e3e3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
   
}
.checkBox input {
    margin-left:5px;
}
.fakeCheck {
     vertical-align:middle;
    background:green;
    width:20px;height:20px;
    display:inline-block;
    margin-left:-20px;
    position:relative;
   border:2px solid transparent;
}
.fakeCheck:hover {
    background: #5CD9FF;
}
.fakeCheckMessage {
    display:inline-block;
    margin-left:5px;
    
    
}
.fakeCheckPreMessage {
    display:inline-block;
    margin-right:5px;   
}
.checkOff{
    background:#F54747;
    border-radius:50%;
}
.checkOn {
    background:#409C4A;
    border-radius:50%;
    box-shadow:0 0 4px #58C74C;
}

JavaScript

$.fn.fakeCheck = function(message, preMessage) {
    $(this).addClass('cb');
    //create the new element
    $(this).find('input').after('<div class="fakeCheck"></div>');
    if (message != null){
        $(this).find('.fakeCheck').after('<div class="fakeCheckMessage">' + message + '</div>');
    };
    if (preMessage != null){
        $(this).find('input').before('<div class="fakeCheckPreMessage">' + preMessage + '</div>');
    };

    $(this).click(function(){
        //change the real box
        if ($(this).find('input').is(':checked') == false){
        
        $(this).find('input').prop('checked', true);
        } else {
        $(this).find('input').removeAttr('checked');
        };

        //optional message
        if (message != null){
            $(this).find('.fakeCheckMessage').fadeIn(800);   
        };
        if (preMessage != null){
            $(this).find('.fakeCheckPreMessage').show(600);   
        };


        //change the color or icon
        if ($(this).find('.fakeCheck').hasClass('checkOff') == true){
            $(this).find('.fakeCheck').removeClass('checkOff').addClass('checkOn');
        } else {
            $(this).find('.fakeCheck').removeClass('checkOn').addClass('checkOff');
        };
    }); //end click

    $(this).find('input').each(function(){
        if ( $(this).is(":checked") == true ){
            alert("checked");
            //wtf is this?
            $(this).parent().find($('.fakeCheck')).addClass('checkOn');
        } else {
            alert("not checked");
            $(this).parent().find($('.fakeCheck')).addClass('checkOff');
        };
    });

    //hide the message
    $('.fakeCheckMessage, .fakeCheckPreMessage').hide();

    return this;
};

$('.checkBox').fakeCheck();
$('.checkBox2').fakeCheck("Message goes here!");
$('.checkBox3').fakeCheck("", "active!");
$('.checkBox4').fakeCheck();