Как задать класс псевдоэлементу через JS?

Question

Есть вариант сделать это через CSS, вот так:

input {
  display: none;
}

label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 3px solid gray;
  border-radius: 50%;
  background-color: rgba(170, 70, 70, 1);
  margin: 5px 10px;
}

input:checked+label::before {
  background-color: rgba(0, 255, 0, 1);
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap" rel="stylesheet">
<input id="inp1" type="checkbox" name="" value="">
<label for="inp1" class="lbl">Макароны</label> <br>
<input id="inp2" type="checkbox" name="" value="">
<label for="inp2" class="lbl">Шаурма</label> <br>
<input id="inp3" type="checkbox" name="" value="">
<label for="inp3" class="lbl">Пицца</label> <br>

Но так можно выбрать несколько вариантов сразу, а нужно, чтобы была возможность выделить только один. Как сделать это через добавление класса в JS?

Answer 1

В комментариях всё верно написали: одиночный выбор - type=radio, множественный выбор - type=checkbox. Но, если хочется сделать через "пень-колоду", то это тоже возможно:

const aLB = [...document.querySelectorAll('input[id^="inp"]')];
aLB.forEach(el => el.addEventListener('click', ev => {
  aLB.forEach(obj => {
    obj.checked = (obj == ev.target)
  })
}));

input {
  display: none;
}

label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 3px solid gray;
  border-radius: 50%;
  background-color: rgba(170, 70, 70, 1);
  margin: 5px 10px;
}

input:checked+label::before {
  background-color: rgba(0, 255, 0, 1);
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap" rel="stylesheet">
<input id="inp1" type="checkbox" name="" value="">
<label for="inp1" class="lbl">Макароны</label> <br>
<input id="inp2" type="checkbox" name="" value="">
<label for="inp2" class="lbl">Шаурма</label> <br>
<input id="inp3" type="checkbox" name="" value="">
<label for="inp3" class="lbl">Пицца</label> <br>

Answer 2

input {
  display: none;
}

label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 3px solid gray;
  border-radius: 50%;
  background-color: rgba(170, 70, 70, 1);
  margin: 5px 10px;
}

input:checked+label::before {
  background-color: rgba(0, 255, 0, 1);
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap" rel="stylesheet">
<input id="inp1" type="radio" name="rbtn" value="">
<label for="inp1" class="lbl">Макароны</label> <br>
<input id="inp2" type="radio" name="rbtn" value="">
<label for="inp2" class="lbl">Шаурма</label> <br>
<input id="inp3" type="radio" name="rbtn" value="">
<label for="inp3" class="lbl">Пицца</label> <br>

БЛОГ НА HUSL

Как задать класс псевдоэлементу через JS?

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