JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<div class="wrapper" onselectstart="return false;">
    <div class="checkbox">1</div>
    <div class="checkbox">2</div>
    <div class="checkbox">3</div>
    <div class="checkbox">4</div>
</div>

CSS

.wrapper {
    -moz-user-select: none;
    -webkit-user-select: none;
}
.checkbox {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;
    border-width: 3px;
    font-weight: 700;
}
.checkbox.checked {
    border-color: #ff0000;
}
.checkbox.none {
    border-color: #777;
    background-color: #eee;
    color: #777;
}

JavaScript

var currentState,
State = {
    CHECKED: 'checked',
    UNCHECKED: 'unchecked',
    NONE: 'none'
};

states = [];

$.each(State, function(k, state) {
    states.push(state);
});

function getState(el$) {
    return el$.data('state') || State.UNCHECKED;
}
function setState(el$, state) {
    var oldState = getState(el$);
    el$.data('state', state)
        .removeClass(oldState)
        .addClass(state);
}
function onMouseDown() {
    var checkbox$ = $(this),
        state = getState(checkbox$);
    stateIndex = states.indexOf(state) + 1;
    if(stateIndex > states.length - 1) {
        stateIndex = 0;
    }
    currentState = states[stateIndex];
    setState(checkbox$, currentState);
}
function onMouseUp() {
    currentState = null;
}
function onMouseOver() {
    if(!!currentState) {
        setState($(this), currentState);
    }
}
$('.checkbox')
    .on('mousedown', onMouseDown)
    .on('mouseover', onMouseOver)
    .on('mouseup', onMouseUp);