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

#javascript #html #jquery

Есть 5 переключателей надо чтобы при смене их позиций вкл/выкл менялся цвет текста
рядом с ними.Цвет текста не важен.

Пример:



/* Вторая кнопка */

.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;
}

  
  
  
текст



  
  
  
текст



  
  
  
текст



  
  
  
текст



  
  
  
текст




    

Ответы

Ответ 1

Поднимаемся от чекбокса вверх до ближайшего родителя с классом "switch", в котором
находим элемент 
:

$(".switch input[type='checkbox']").click(function(){
  $(this).closest(".switch").find("p").
    css("color", this.checked? "green" : "black");
});