Как сделать счетчика выбранных элементов (checkbox) стандартными средствами без использования JS?
Если выбранные элементы отсутствуют, блок со счетчиком должен скрываться.
1 ответ
Написал небольшой пример счетчика выбранных элементов (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>