@Kipsi

Как сделать такой выбор элементов на js?

Как сделать так именно на чистом JS без JQ чтобы при нажатии на элементы им добавлялся класс active и в "Выбрать пол" можно было выбрать только 1 элемент одновременно как у radio, а в "Выбрать тип одежды" можно было выбирать много пунктов как у checkbox и при повторном нажатие убирать класс, а при нажатие на кнопку "Выбрать все категории" она получала active, а все остальные сбрасывались в неактивное состояние. И при повторном нажатие на другие кнопки уже убирался класс active с "Выбрать все категории".
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Элементам .item добавить data-атрибуты, указывающие, выбор какого типа осуществляется с помощью кнопок внутри (only - выбран может быть только один вариант вообще, one - выбран может быть только один вариант внутри данного .item, multiple - можно выбирать произвольное количество вариантов внутри данного .item):

<div class="item" data-type="only">
  <h2>Выбрать все категории</h2>
  ...
</div>
<div class="item" data-type="one">
  <h2>Выбрать пол</h2>
  ...
</div>
<div class="item" data-type="multiple">
  <h2>Выбрать тип одежды</h2>
  ...
</div>

const containerSelector = '.filter';
const itemSelector = `${containerSelector} .item`;
const baseBtnSelector = 'button';
const btnSelector = `${itemSelector} ${baseBtnSelector}`;
const btnOnlySelector = `${itemSelector}[data-type="only"] ${baseBtnSelector}`;
const activeClass = 'active';

document.addEventListener('click', ({ target: t }) => {
  const button = t.closest(btnSelector);
  if (button) {
    const toggle = n => n.classList.toggle(activeClass, n === button);
    const item = button.closest(itemSelector);
    const { type } = item.dataset;

    item
      .closest(containerSelector)
      .querySelectorAll(type === 'only' ? btnSelector : btnOnlySelector)
      .forEach(toggle);

    if (type === 'multiple') {
      button.classList.toggle(activeClass);
    } else if (type === 'one') {
      item.querySelectorAll(btnSelector).forEach(toggle);
    }
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы