Реализую фильт. При 8+ активных checkbox появляется поле поиска, а активные checkbox поднимаются вверх.
Подскажите, пожалуйста, как реализовать функционал фильтра?
У меня не выходит разобраться с двумя моментами:
- При клике на checkbox хочу сделать чтобы добалялось/убиралось значение в счетчике(сейчас только добавляется);
- Если мы кликаем по элементу сheckbox он поднимается в самый верх списка, если галку убираем соответственно перемещается на прежнее место.
window.onload = function() {
let clickDiv = document.getElementById("click-div");
clickDiv.onclick = incrementClick;
let resetBtn = document.getElementById("reset-button");
resetBtn.onclick = resetCounter;
}
var counterVal = 0;
incrementClick = function() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
if (counterVal >= 8) {
document.getElementById("search_id").style.display = "block";
} else if (counterVal <= 8) {
document.getElementById("search_id").style.display = "none";
}
}
.search_id {
display: none;
}
#click-div input {
display: block;
}
#click-div span {
display: inline-block;
}
<h3>
<center>JavaScript Click Counter</center>
</h3>
<div>
<input id="search_id" type="поиск">
<center>
<h3 id="counter-label">0</h3>
</center>
</div>
<center>
<div>
<div id="click-div">
<input type="checkbox">A</input>
<input type="checkbox">B</input>
<input type="checkbox">C</input>
<input type="checkbox">D</input>
<input type="checkbox">E</input>
<input type="checkbox">T</input>
<input type="checkbox">Y</input>
<input type="checkbox">U</input>
<input type="checkbox">I</input>
</div>
<button id="reset-button">Reset</button>
</div>
</center>