Обработка нажатий переключателя

/* Вторая кнопка */ 
 
.cmn-toggle { 
  position: absolute; 
  margin-left: -9999px; 
  visibility: hidden; 
} 
 
.cmn-toggle+label { 
  display: block; 
  position: relative; 
  cursor: pointer; 
  outline: none; 
  user-select: none; 
  top: 495px; 
  left: 575px; 
  z-index: 8; 
} 
 
input.cmn-toggle-round+label { 
  padding: 2px; 
  width: 50px; 
  height: 30px; 
  background-color: #dddddd; 
  border-radius: 60px; 
} 
 
input.cmn-toggle-round+label:before, 
input.cmn-toggle-round+label:after { 
  display: block; 
  position: absolute; 
  top: 1px; 
  left: 1px; 
  bottom: 1px; 
  content: ""; 
} 
 
input.cmn-toggle-round+label:before { 
  right: 1px; 
  background-color: #161616; 
  border-radius: 60px; 
  transition: background 0.4s; 
} 
 
input.cmn-toggle-round+label:after { 
  width: 30px; 
  height: 32px; 
  background-color: #fff; 
  border-radius: 100%; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  transition: margin 0.4s; 
} 
 
input.cmn-toggle-round:checked+label:before { 
  background-color: #4cda64; 
} 
 
input.cmn-toggle-round:checked+label:after { 
  margin-left: 21px; 
} 
 
 
/* Третья кнопка */ 
 
.cmn-toggle1 { 
  position: absolute; 
  margin-left: -9999px; 
  visibility: hidden; 
} 
 
.cmn-toggle1+label { 
  display: block; 
  position: relative; 
  cursor: pointer; 
  outline: none; 
  user-select: none; 
  top: 555px; 
  left: 575px; 
  z-index: 9; 
} 
 
input.cmn-toggle-round1+label { 
  padding: 2px; 
  width: 50px; 
  height: 30px; 
  background-color: #dddddd; 
  border-radius: 60px; 
} 
 
input.cmn-toggle-round1+label:before, 
input.cmn-toggle-round1+label:after { 
  display: block; 
  position: absolute; 
  top: 1px; 
  left: 1px; 
  bottom: 1px; 
  content: ""; 
} 
 
input.cmn-toggle-round1+label:before { 
  right: 1px; 
  background-color: #161616; 
  border-radius: 60px; 
  transition: background 0.4s; 
} 
 
input.cmn-toggle-round1+label:after { 
  width: 30px; 
  height: 32px; 
  background-color: #fff; 
  border-radius: 100%; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  transition: margin 0.4s; 
} 
 
input.cmn-toggle-round1:checked+label:before { 
  background-color: #4cda64; 
} 
 
input.cmn-toggle-round1:checked+label:after { 
  margin-left: 21px; 
} 
 
 
/* Первая кнопка */ 
 
.cmn-toggle2 { 
  position: absolute; 
  margin-left: -9999px; 
  visibility: hidden; 
} 
 
.cmn-toggle2+label { 
  display: block; 
  position: relative; 
  cursor: pointer; 
  outline: none; 
  user-select: none; 
  top: 337px; 
  left: 575px; 
  z-index: 7; 
} 
 
input.cmn-toggle-round2+label { 
  padding: 2px; 
  width: 50px; 
  height: 30px; 
  background-color: #dddddd; 
  border-radius: 60px; 
} 
 
input.cmn-toggle-round2+label:before, 
input.cmn-toggle-round2+label:after { 
  display: block; 
  position: absolute; 
  top: 1px; 
  left: 1px; 
  bottom: 1px; 
  content: ""; 
} 
 
input.cmn-toggle-round2+label:before { 
  right: 1px; 
  background-color: #161616; 
  border-radius: 60px; 
  transition: background 0.4s; 
} 
 
input.cmn-toggle-round2+label:after { 
  width: 30px; 
  height: 32px; 
  background-color: #fff; 
  border-radius: 100%; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  transition: margin 0.4s; 
} 
 
input.cmn-toggle-round2:checked+label:before { 
  background-color: #4cda64; 
} 
 
input.cmn-toggle-round2:checked+label:after { 
  margin-left: 21px; 
} 
 
 
/* Четвертая кнопка */ 
 
.cmn-toggle3 { 
  position: absolute; 
  margin-left: -9999px; 
  visibility: hidden; 
} 
 
.cmn-toggle3+label { 
  display: block; 
  position: relative; 
  cursor: pointer; 
  outline: none; 
  user-select: none; 
  top: 576px; 
  left: 575px; 
  z-index: 7; 
} 
 
input.cmn-toggle-round3+label { 
  padding: 2px; 
  width: 50px; 
  height: 30px; 
  background-color: #dddddd; 
  border-radius: 60px; 
} 
 
input.cmn-toggle-round3+label:before, 
input.cmn-toggle-round3+label:after { 
  display: block; 
  position: absolute; 
  top: 1px; 
  left: 1px; 
  bottom: 1px; 
  content: ""; 
} 
 
input.cmn-toggle-round3+label:before { 
  right: 1px; 
  background-color: #161616; 
  border-radius: 60px; 
  transition: background 0.4s; 
} 
 
input.cmn-toggle-round3+label:after { 
  width: 30px; 
  height: 32px; 
  background-color: #fff; 
  border-radius: 100%; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  transition: margin 0.4s; 
} 
 
input.cmn-toggle-round3:checked+label:before { 
  background-color: #4cda64; 
} 
 
input.cmn-toggle-round3:checked+label:after { 
  margin-left: 21px; 
} 
 
 
/* Пятая кнопка */ 
 
.cmn-toggle4 { 
  position: absolute; 
  margin-left: -9999px; 
  visibility: hidden; 
} 
 
.cmn-toggle4+label { 
  display: block; 
  position: relative; 
  cursor: pointer; 
  outline: none; 
  user-select: none; 
  top: 637px; 
  left: 575px; 
  z-index: 9; 
} 
 
input.cmn-toggle-round4+label { 
  padding: 2px; 
  width: 50px; 
  height: 30px; 
  background-color: #dddddd; 
  border-radius: 60px; 
} 
 
input.cmn-toggle-round4+label:before, 
input.cmn-toggle-round4+label:after { 
  display: block; 
  position: absolute; 
  top: 1px; 
  left: 1px; 
  bottom: 1px; 
  content: ""; 
} 
 
input.cmn-toggle-round4+label:before { 
  right: 1px; 
  background-color: #161616; 
  border-radius: 60px; 
  transition: background 0.4s; 
} 
 
input.cmn-toggle-round4+label:after { 
  width: 30px; 
  height: 32px; 
  background-color: #fff; 
  border-radius: 100%; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
  transition: margin 0.4s; 
} 
 
input.cmn-toggle-round4:checked+label:before { 
  background-color: #4cda64; 
} 
 
input.cmn-toggle-round4:checked+label:after { 
  margin-left: 21px; 
}

<div class="switch"> 
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> 
  <label for="cmn-toggle-1"></label> 
  <p>текст</p> 
</div> 
 
<div class="switch"> 
  <input id="cmn-toggle-2" class="cmn-toggle1 cmn-toggle-round1" type="checkbox"> 
  <label for="cmn-toggle-2"></label> 
  <p>текст</p> 
</div> 
 
<div class="switch"> 
  <input id="cmn-toggle-3" class="cmn-toggle2 cmn-toggle-round2" type="checkbox"> 
  <label for="cmn-toggle-3"></label> 
  <p>текст</p> 
</div> 
 
<div class="switch"> 
  <input id="cmn-toggle-4" class="cmn-toggle3 cmn-toggle-round3" type="checkbox"> 
  <label for="cmn-toggle-4"></label> 
  <p>текст</p> 
</div> 
 
<div class="switch"> 
  <input id="cmn-toggle-5" class="cmn-toggle4 cmn-toggle-round4" type="checkbox"> 
  <label for="cmn-toggle-5"></label> 
  <p>текст</p> 
</div>