Как сделать такой checkbox?

Question

[WebforSelf]

Друзья скажите как сделать такие чекбоксы?нашел решение где сделано через id
но у меня же их много. Меняю на классы и перестает работать.

#payt4 {display: none;}
[for="payt4"] {
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  font-weight:normal;
}
[for="payt4"]:before {
  content: "Не надо";
background:#f7931e;
color:#fff;
  display: inline-block;
  padding: 10px 10px;
  margin-right:1px;
  		border-bottom-left-radius:5px;
		border-top-left-radius:5px;
}
[for="payt4"]:after {
  content: "Надо";
    background:#d9d9d9;
	    color: #333;
		display: inline-block;
  padding: 10px 20px;
  		border-bottom-right-radius:5px;
		border-top-right-radius:5px;
}
#payt4:checked ~ [for="payt4"]:after {
background:#f7931e;
color:#fff;
}
#payt4:checked ~ [for="payt4"]:before {
background:#d9d9d9;
    color: #333;
}

Comments

[CODALSD]

Для полноты надо было в песочницу или хотя бы html тоже выложить

[WebforSelf]

CODALSD,

<input type="checkbox" id="payt4"/><label for="payt4"></label>

меня вообще интересует решение боллее простое есть или нет

[CODALSD]

Наверное только JS

Answer 1

[Dania Bagaeff]

Непонятно что плохого в том что много, перечислить через запятую проблема то. А так можно было бы увидеть html чтобы понять.
Для работы for на сколько помнится id у чекбоксов указывать придется, а если убрать id тогда label не будет отправлять на чекбокс. И тогда единственное что получится сделать это

.pay:checked ~ [for="payt4"]:before {
    background:#d9d9d9;
    color: #333;
}

а раз их много то

.pay:checked ~ [for="payt3"]:before ,
.pay:checked ~ [for="payt4"]:before {
    background:#d9d9d9;
    color: #333;
}

можно рискнуть и попробовать

.pay:checked ~ label:before, {
    background:#d9d9d9;
    color: #333;
}

или

.pay:checked ~ label[for]:before, {
    background:#d9d9d9;
    color: #333;
}

Только для каждого .pay и label будет нужен какой-нибудь блок, чтобы они не влияли на друг друга или последующие блоки

Answer 2

[tyzberd]

можно обернуть каждый input в label, тогда for="payt4" не нужно

Answer 3

[Дмитрий]

Пример