JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<!--<span class='outer active'><span class='circle'></span></span>-->
<form>
    <label for='some_inp'>some inp</label><input id='some_inp' type='checkbox' checked = 'true' name='some-tratata'>
    <label for='some'>some inp</label><input id='some' type='checkbox' name='some'>
    </form>

CSS

body{
    font-size:1em;
}
label{
    clear:both;
    display:block;
}
.wrap .outer{
    height:1.5em;
    width:3.5em;
    line-height:1.5em;
    position:relative;
    float:left;   
    background:#fff;
    overflow:hidden;
    border:0 solid black;
    border-radius:1.5em;
}
.wrap .outer:before{
    content:'On';
    padding-right:1.5em;
    display:block;
    background:#f00;
    border:0 solid blakc;
    border-radius:1.5em;
    padding-left:.5em;
}

.wrap .outer:after{
    content:'Off';
    padding-left:1.5em;
    border:0 solid black;
    border-radius:1.5em;
    display:block;
    background:#f0f;
    position:absolute;
    right:0;
    top:0;
    width:2em;
    transition:right .2s;
}
.wrap.active .outer:after{
    right:-2em; 
}
.circle{
    width:1.5em;
    height:1.5em;
    border:0 solid black;
    border-radius:100%;
    background:#ccc;
    display:block;
    position:absolute;
    top:0;
    right:2em;
    z-index:100;
    transition:right .2s;
}
.wrap.active .circle{
    top:0;
    right:0;
}

JavaScript

function pattern(type){
    var result;
    switch(type){
        case 'checkbox': result = "<span class='outer'><span class='circle'></span></span>"; break;
    }
    return result
}

var checkbox = document.querySelectorAll('input[type="checkbox"]')
for(var i = 0; i < checkbox.length; i++)
    changeCheckbox(checkbox[i]);

function changeCheckbox(checkbox){
    checkbox.style.display = 'none';
    var span = document.createElement('span');
    span.className = checkbox.checked ? 'wrap active' : 'wrap';
    span.innerHTML = pattern('checkbox');
    console.log(checkbox.parentNode)
    checkbox.parentNode.insertBefore(span, checkbox);
    span.onclick = function(){
        if(this.className == 'wrap active'){
            this.className = 'wrap';
            console.log(this.nextElementSibling)
            this.nextElementSibling.checked = false;
        }
        else{
            this.className = 'wrap active';
            this.nextElementSibling.checked = true;
        }
    }    
}