console
document.getElementById("switch_btn").onclick = function () {
if (this.children[0].checked == true) {
this.children[1].className = "input checked"
} else {
this.children[1].className = "input"
}
}
<label class="switch_on" id="switch_btn">
哈哈哈：
<input type="checkbox" checked="checked" >
<span class="input checked"></span>
</label>
span,input {
width: 40px;
height: 50px;
position: absolute;
background: none;
-webkit-appearance: none;
}
span.input.checked:before {
border-color: #64bd63;
box-shadow: #64bd63 0px 0px 0px 16px inset;
background-color: #64bd63;
transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
}
span.input:before {
content: '';
width: 50px;
height: 25px;
border-radius: 20px;
display: inline-block;
position: absolute;
top: 12.5px;
left: 0;
border: 1px solid #dfdfdf;
box-shadow: #dfdfdf 0px 0px 0px 0px inset;
background-color: #fdfdfd;
transition: border 0.4s, box-shadow 0.4s;
background-clip: content-box;
}
span.input.checked:after {
content:"ss";
left: 35px;
}
span.input:after {
content: '';
width: 25px;
height: 25px;
position: absolute;
top: 12.5px;
left: 0;
border-radius: 100%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: left 0.2s;
}