@Bylex

Как показать текст в зависимости от data в checkbox?

Подскажите как при выбранном checkbox, скрывать/показывать ссылки в price-problem, с привязкой. Выбрано может быть несколько чекбоксов, соотсветственно нужно показывать все выбранные, скрывать все не выбранные. Привязка идет в data. Типы и проблемы тоже должны быть связаны.

Выбираем "Не стирает, мигает" - скрываются в price-problem "Течет", остальные показываются.

<div class="remont">
    <div class="problem">
    <input data-type="Стиральная машина" data-problem="Не стирает" type="checkbox" value="Не стирает">
    <input data-type="Стиральная машина" data-problem="Мигает" type="checkbox" value="Мигает">
    <input data-type="Стиральная машина" data-problem="Течет" type="checkbox" value="Течет">
    </div>
    
    <div class="price-problem">
    <a data-type="Стиральная машина" data-problem="Не стирает" href="#" class="price__item">100р</a>
    <a data-type="Стиральная машина" data-problem="Мигает" href="#" class="price__item">100р</a>
    <a data-type="Стиральная машина" data-problem="Течет" href="#" class="price__item">100р</a>
    </div>
    
    </div>
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$('.problem').change(({ target: t }) => {
  const attrsSelector = [ 'type', 'problem' ]
    .map(n => `[data-${n}="${t.dataset[n]}"]`)
    .join('');

  $(`.price-problem ${attrsSelector}`).toggle(t.checked);
}).find('input').change();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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