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

290

11 июня 2022, 19:20

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

Думаю как-то так

$(".problem input").on('change', function(){
  let dataProblem = $(this).attr('data-problem');
  let control = $(`.price-problem a[data-problem="${dataProblem}"]`);
  if (control.is(":hidden")) {
    $(`.price-problem a[data-problem="${dataProblem}"]`).show();
  } else {
    $(`.price-problem a[data-problem="${dataProblem}"]`).hide();
  }
});
[...$(".price-problem a")].forEach(item => $(item).hide())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<br/>
<a data-type="Стиральная машина" data-problem="Мигает" href="#" class="price__item">Мигает - 100р</a>
<br/>
<a data-type="Стиральная машина" data-problem="Течет" href="#" class="price__item">Течет - 100р</a>
</div>
</div>

Answer 2

Вариант на jQuery.

Привязка идёт по data-type (ищется a[data-type]) и по value (a[data-problem]).
Из минусов - регистрозависимость.

let list = $('.price-problem');
$('.problem').on('click', 'input[type="checkbox"]', function() {
  let inputs = $('.problem').find('input[type="checkbox"]:checked');
  if(inputs.length > 0) {
    list.find('a.--show').removeClass('--show');
    inputs.each(function() {
      let type = $(this).attr('data-type'),
        value = $(this).val(),
        check = $(this).prop('checked');
      
      list.find('a[data-type="'+type+'"][data-problem="'+value+'"]').addClass('--show');
    });
  } else list.find('a.--show').removeClass('--show');
});

.price-problem > a {display: none;}
.price-problem > a.--show {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="remont">
  <div class="problem">
    <input data-type="Стиральная машина" data-problem="Не стирает" type="checkbox" value="Не стирает"> Стиральная машина - не стирает<br>
    <input data-type="Стиральная машина" data-problem="Мигает" type="checkbox" value="Мигает"> Стиральная машина - мигает<br>
    <input data-type="Стиральная машина" data-problem="Течет" type="checkbox" value="Течет"> Стиральная машина - течёт<br>
    <input data-type="Микроволновая печь" data-problem="Течет" type="checkbox" value="Не крутится"> Микроволновая печь - не крутится<br>
  </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>
    <a data-type="Микроволновая печь" data-problem="Не крутится" href="#" class="price__item">Микроволновая печь - не крутится | 100р</a>
  </div>
</div>

Answer 3

Еще вопрос. А как скрыть дубли? Выбираем "Не стирает, Мигает". Появиться дубли, 2 раза "Не стирает". Вот как в таком случае скрыть дубли при двойном checkbox?

<div class="remont">
<div class="problem">
<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">Не стирает</a>
<a data-type="Стиральная машина" data-problem="Мигает" href="#" class="price__item">Не стирает</a>
<a data-type="Стиральная машина" data-problem="Течет" href="#" class="price__item">Течет</a>
</div>