SOURCE

var audio = new Audio();
audio.src = 'https://service.loveonline.net.cn:9443/check-on.wav';
var audio1 = new Audio();
audio1.src = 'https://service.loveonline.net.cn:9443/check-off.wav';
var audio2 = new Audio();
audio2.src ='https://service.loveonline.net.cn:9443/generic-hover-soft.wav';

var html = '';
for (var i = 1; i < 2; i++) {
    html += '<div id="c' +i+'" class="checkbox-container without-transition" >' + 
    '<div style="  transition: all .3s ease-out;"></div>' + 
  '</div>';
}
document.body.innerHTML = html;
for (var i = 1; i < 2; i++) {
init('#c' + i);
}


function init(id) {

    document.querySelector(id).onclick = function() {
  this.checked = !this.checked;
  this.children[0].style.transition = 'none';
  this.className = this.checked ? 'checkbox-container checked' : 'checkbox-container';
  var a = ( this.checked ? audio : audio1);
  a.currentTime = 0;
  a.play();

    }
    document.querySelector(id).onmouseout = function() {
                this.children[0].style.transition = 'all .3s ease-out';
    }
        document.querySelector(id).onmouseover = function() {
            audio2.currentTime = 0;
            audio2.play();
        }
}

body {
  background: #222;
  padding-top: 200px;
  overflow: hidden;
}
.checkbox-container {
  margin: 40px auto;
}
.checkbox-container {
  width: 40px;
}
.checkbox-container > div {
  width: 16px;
  height: 8px;
  border: 2px solid rgb(255,102,170);
  border-radius: 50px;
  margin: 0 0 0 auto;
}

.checkbox-container > div:hover {
  width: 36px;
  background-color: rgba(255,102,170, 0.8);
  border-color: #eee;
  box-shadow: 0px 0px 8px 2px rgb(255,102,170);
}

.checkbox-container.checked > div {
  background: rgb(255,102,170);
  border-color: rgb(255,102,170);
}
.checkbox-container.checked > div:hover {
  background: #eee;
  border-color: #eee;
}