Как чтобы набор переключателей radio работал как переключатели, в чем ошибка?

Question

[Тарас Паращук]

Подскажите пожалуйста.
Нашел урок в интернете и хочу сделать группу переключателей.
Вроде получилось, но как сделать чтобы они действовали как переключатели, а то теперь они действуют независимо ?

spoiler

.radio {
	display: none;
}

.radio-custom {
	width: 90px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 12px;
	position: relative;
}

.radio-custom, .label {
	display: inline-block;
	vertical-align: middle;
  margin-right:-60px;
}

.radio:checked + .radio-custom::before {
	content: "";
	display: block;
	position: absolute;
  top:7px;
	left: 10px;
	background:#fac012;
	border-radius: 50%;
  width:15px;
  height:15px;
}

<form action="#">
       <label class="mx-5">
           <input class="radio " type="radio" name="radio1">
           <span class="radio-custom"></span>
           <span class="label">1 кім</span>
       </label>
       <label class="mx-5">
          <input class="radio" type="radio" name="radio2">
          <span class="radio-custom"></span>
          <span class="label">2 кім</span>
      </label>
      <label class="mx-5">
          <input class="radio" type="radio" name="radio3">
          <span class="radio-custom"></span>
          <span class="label">3 кім</span>
      </label>
      <label class="mx-5">
          <input class="radio" type="radio" name="radio4">
          <span class="radio-custom"></span>
          <span class="label">4 кім</span>
      </label>
      <label class="mx-5">
          <input class="radio" type="radio" name="radio5">
          <span class="radio-custom"></span>
          <span class="label">5 кім</span>
      </label>
     </form>

Answer 1

[tyzberd]

у всех в группе должен быть атрибут name c одинаковым значением. Код лучше добавляйте в песочницу https://codepen.io/pen/

Comments

[Тарас Паращук]

Спасибо !!!!