0

Есть вариант сделать это через 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?

3
  • 3
    если тебе нужен radio button, не нужно использовать checkbox
    – Grundy
    9 июн 2020 в 16:32
  • 2
    Хочу добавить к комментарию @Grundy, что чтоб радиобатн работал правильно, у всех должен быть одинаковый name 9 июн 2020 в 17:04
  • псевдо-элемент на то и псевдо-элемент, отследить через js его не получится. Хотя можно воспользоваться погружением в событие, но тогда с родителем случится тоже, что и с псевдо-элементом.
    – kertAW
    9 июн 2020 в 17:24

2 ответа 2

2

В комментариях всё верно написали: одиночный выбор - 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>

6
  • а зачем искать + label и потом брать previousElementSibling? Почему сразу не выбрать чекбоксы?
    – Grundy
    9 июн 2020 в 18:39
  • @Grundy: чекбоксы практически никак не уникализированы, а на странице могут быть и другие.
    – UModeL
    9 июн 2020 в 18:54
  • так и лейблы не дают гарантию :-) Пока выглядит. как усложение ради усложнения
    – Grundy
    9 июн 2020 в 19:00
  • @Grundy: ок. Поправил. Так лучше?
    – UModeL
    9 июн 2020 в 19:06
  • да, в принципе [checkbox] можно было оставить :)
    – Grundy
    9 июн 2020 в 19:09
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.