JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<span class="checkbox">
    <input type="checkbox" />
    <span class="check"></span>
    <label class="label">Лэйбл чекбокса</label>
</span>

CSS

span.checkbox {    
    cursor: pointer;
    display: inline-block;
    height: 18px;
}
span.checkbox:hover {
    background: #eee;
}
span.checkbox:hover .check {
    border-color: #666;
}
span.checkbox input {
    display: none;
}
span.checkbox .check {
    width: 12px;
    height: 12px;
    margin: 2px;
    border: 1px solid #999;
    background: #fff;
    float: left;
}
span.checkbox.checked .check {
    background: url("http://web.made12.ru/images/checkmark.png") no-repeat -4px -6px;
}

JavaScript

(function($){
    // вешаем наш код на domready
    $(document).ready(function(){
        // инициализация состояния псевдочекбоксов
        $(".checkbox").each(function(){
            var checked = $('input', this).is(':checked');
            $(this).toggleClass('checked', checked);
        });
        // оживляем псеводчекбоксы
        $(".checkbox").click(function(){
            var checked = $('input', this).is(':checked');
            $(this).toggleClass('checked', !checked);
            $('input', this).attr('checked', !checked);
        });
    });    
})(jQuery);