2

Как сделать счетчика выбранных элементов (checkbox) стандартными средствами без использования JS?
Если выбранные элементы отсутствуют, блок со счетчиком должен скрываться.

1 ответ 1

4

Написал небольшой пример счетчика выбранных элементов (checkbox).
Пригодится в качестве ознакомления возможностей CSS.

input:checked {
  counter-increment: list;
}
.result {
  display: none;
}
input:checked ~ .result {
  display: block;
}
.result::after {
  content: "Selected: "counter(list);
}

P.S Ждем переменные в CSS

Демо:

input:checked {
  counter-increment: list;
}
.result {
  display: none;
}
input:checked ~ .result {
  display: block;
}
.result::after {
  content: "Selected: "counter(list);
}
<h3>Select any checkbox</h3>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<div class="result"></div>

CodePen

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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