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

Question

[Bylex]

Подскажите как при выбранном 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>

Answer 1

[0xD34F]

$('.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();

Comments

[Bylex]

Спасибо! А почему не ранее предложенный вариант?

$('.problem').change(function({ target: t }) {
  const { type, problem } = t.dataset;
  $(`a[data-type="${type}"][data-problem="${problem}"]`).toggle(t.checked);
}).find('input').change();

[0xD34F]

Bylex, что "спасибо"? Не надо никаких спасиб. Получая ответ, первое что вам следует сделать - чётко и недвусмысленно обозначить степень его полезности, насколько он помогает решить заявленную проблему.

"Почему" - потому что там трижды используются имена data-атрибутов. Думаю, что это многовато, если завтра вдруг понадобится добавить третий - и его три раза вписывать? С массивом проще - один раз.

[Bylex]

0xD34F, ваш вариант разрешил мою проблему. И все же спасибо.