Как синхронизировать сокращенный и расширенный фильтры?

Question

У меня есть два фильтра на странице - сокращенный и расширенный. Не знаю, как синхронизировать их. Чтобы при изменение данных в первом, изменялись во втором, и наоборот. Например при выборе чекбокса в сокращенном, выбирался такой же в расширенном автоматически. И при изменении nouislider в первом изменялись данные в другом. Расширенный фильтр открывается в модальном окне. Спасибо за ответ.

Answer 1

Если бы я делал задачу по манипулированию "одинаковыми" чекбоксами, в разных списках, то наверное положил бы все чекбоксы из нужных списков в массив, а потом, проходился бы по нему и менял данные (отмечал, деактивировал и т.д.). Например, отметить одинаковые чекбоксы в разных списках, при помощи JS можно как ниже. Может быть, есть какое-то красивое решение на чистом CSS, но я на вскидку не придумал. Другие манипуляцию с чекбоксами и данными, которые они представляют можно сделать по похожему принципу. Удачи.

//выбираю все чекбоксы
let inputs = document.querySelectorAll('input[type="checkbox"]');

//делаю проход по массиву

for(let p of inputs){

p.addEventListener('change', (e)=>{
let name = e.target.name;
let status = e.target.checked;
//если чекбокс отммечен, то

if(status){
//чек чекбоксы с одинаковыми именами

[...inputs].forEach(function(item){

if(item.name == name) item.checked = true;
})
}


})

}

._block1{
  border: 1px solid red;
  width: 400px;
}

._block2{
  border: 1px solid green;
    width: 400px;

}

<div class="_block1">
<label for="apples">Яблоки</label>
    <input type="checkbox" name="apples" id="apples">
<label for="pears">Груши</label>
    <input type="checkbox" name="pears" id="pears">
    <label for="monkeys">Обезьяны</label>
    <input type="checkbox" name="monkeys" id="monkeys">
    </div>
    
    <div class="_block2">
<label for="apples_block2">Яблоки</label>
    <input type="checkbox" name="apples" id="apples_block2">
<label for="pears_block2">Груши</label>
    <input type="checkbox" name="pears" id="pears_block2">
    <label for="monkeys_block2">Обезьяны</label>
    <input type="checkbox" name="monkeys" id="monkeys_block2">
    </div>

БЛОГ НА HUSL

Как синхронизировать сокращенный и расширенный фильтры?

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