JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="checkBox" >
    Active?
    <input type="checkbox" checked />
    <div class="fakeCheck" ></div>
    <div class="fakeCheckMessage">hello world</div>
</div>
<div class="checkBox" >
    Active?
    <input type="checkbox" checked />
    <div class="fakeCheck" ></div>
    <div class="fakeCheckMessage">hello world</div>
</div>
<div class="checkBox" >
    Active?
    <input type="checkbox"  />
    <div class="fakeCheck" ></div>
    <div class="fakeCheckMessage">hello world</div>
</div>
<div class="selectBox">
    here
</div>

CSS

.checkBox {
    background:#e3e3e3;
    padding:1px 4px 4px;
    display:inline-block;
    margin:5px;
}
.checkBox input {
    margin-left:5px;
}
.fakeCheck {
    background:green;
    width:20px;height:20px;
    display:inline-block;
    margin-left:-20px;
    position:relative;
    top:4px;
}
.fakeCheckMessage {
    display:inline-block;
    
}
.checkOff{
    background:red;
}
.checkOn {
    background:green
}

JavaScript

$('.fakeCheck').click(function(){
    //change the real box
    $(this).parent().find('input').prop('checked',true);
    
    //optional message
    if ($(this).parent().find('.fakeCheckMessage').text().length > 1){
      $(this).parent().find('.fakeCheckMessage').fadeIn(500);
    };
    
    //change the color or icon
    if ($(this).hasClass('checkOff') == true){
        $(this).removeClass('checkOff').addClass('checkOn');
    } else {
        $(this).removeClass('checkOn').addClass('checkOff');
    };
alert('end');
});

//initial hide
if ($('.fakeCheckMessage').length > 0){
    $('.fakeCheckMessage').hide();
};

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