Как установить значение по умолчанию для нескольких radio-button?

Question

Делаю несколько радио-кнопок для управления объектами. Каждая должна по умолчанию находиться в режиме А. У каждой на нужной позиции прописан checked, также они находятся в отдельных контейнерах, но только верхняя устанавливает значение по умолчанию. Может быть какой-то конфликт HTML с CSS, как это исправить?

Код кнопок:

fieldset {
  position: fixed;
  display: flex;
  justify-content: space-around;
  border: 0;
  text-align: center;
}

#oneSwitchBtn {
  margin-top: 5%;
}

#twoSwitchBtn {
  margin-top: 15%;
}

label {
  display: inline-block;
  position: relative;
  width: 3rem;
  padding-bottom: 2.5rem;
  z-index: 2;
  cursor: pointer;
  font-family: 'Inter-bold';
  color: #30d5c8;
}

label:first-of-type {
  z-index: 1;
}

input {
  position: absolute;
  top: 0;
  height: 100%;
  width: 20%;
  appearance: none;
  background: none;
  opacity: 0.000001;
}


/* focus styles ======*/

input:focus+label {
  text-decoration: underline;
}

fieldset:focus-within label:first-of-type::before {
  box-shadow: 0 0 0 2px white, 0 0 0 4px grey;
}


/* toggle background =========== */

label:first-of-type::before {
  content: '';
  position: absolute;
  width: 8rem;
  height: 2rem;
  bottom: 0;
  left: 0.5rem;
  background-color: grey;
  border-radius: 0.95rem;
}


/* toggle knob (thumb?) ========= */

label:last-of-type::after {
  content: '';
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background-color: black;
  border-radius: 50%;
  bottom: 0.25rem;
  right: 0.75rem;
  transition: transform 0.3s ease;
}

input:first-of-type:checked~label:last-of-type::after {
  transform: translateX(-6rem);
  background-color: rgb(22, 192, 73);
}

input:nth-of-type(2):checked~label:last-of-type::after {
  transform: translateX(-3rem);
  background-color: rgb(70, 70, 70);
}

input:last-of-type:checked~label:last-of-type::after {
  transform: translateX(0);
  background-color: red;
}


/* end of toggle ================== */

<fieldset id="oneSwitchBtn">
  <input name="state" value="on" id="none0" type="radio">
  <label for="none0"> 0 </label>
  <input name="state" value="auto" id="none01" type="radio" checked>
  <label for="none01">A</label>
  <input name="state" value="off" id="none02" type="radio">
  <label for="none02"> 1 </label>
</fieldset>

<fieldset id="twoSwitchBtn">
  <input name="state" value="on" id="none1" type="radio">
  <label for="none1"> 0 </label>
  <input name="state" value="auto" id="none2" type="radio" checked>
  <label for="none2">A</label>
  <input name="state" value="off" id="none3" type="radio">
  <label for="none3"> 1 </label>
</fieldset>

Answer 1

Все дело в атрибуте name, он у вас один и тот же для двух групп. Чтобы каждая группа радиокнопок работала независимо, вам нужно задать уникальные значения атрибута name для каждой группы радиокнопок

<fieldset id="oneSwitchBtn">
  <input name="state1" value="on" id="none0" type="radio">
  <label for="none0"> 0 </label>
  <input name="state1" value="auto" id="none01" type="radio" checked>
  <label for="none01">A</label>
  <input name="state1" value="off" id="none02" type="radio">
  <label for="none02"> 1 </label>
</fieldset>

<fieldset id="twoSwitchBtn">
  <input name="state2" value="on" id="none1" type="radio">
  <label for="none1"> 0 </label>
  <input name="state2" value="auto" id="none2" type="radio" checked>
  <label for="none2">A</label>
  <input name="state2" value="off" id="none3" type="radio">
  <label for="none3"> 1 </label>
</fieldset>

Группа радиокнопок определяется путем присвоения каждому из радиокнопок в группе одинакового значения атрибута name. После того как группа радиокнопок создана, выбор любой радиокнопки в этой группе автоматически отменяет выбор уже выбранной радиокнопки в той же группе. На странице может быть столько групп радиокнопок, сколько вам нужно, при условии, что каждая группа имеет уникальное значение атрибута name [подробней]

БЛОГ НА HUSL

Как установить значение по умолчанию для нескольких radio-button?

Ответы (1 шт):