1

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

Всем огромное спасибо! Все варианты рабочие.

3 ответа 3

2

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

$(".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>

0

Вариант на 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>

-1

Еще вопрос. А как скрыть дубли? Выбираем "Не стирает, Мигает". Появиться дубли, 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>
2
  • про дубли ничего не было изначально, поэтому код отвечает на вопрос. Другая проблема - другой вопрос - другие ответы. Забрали "галочку" - значит, Вам мой ответ не подходит - удаляю свой ответ.
    – UModeL
    13 ноя 2020 в 9:51
  • верните, поставлю вам галочку - без проблем. 13 ноя 2020 в 10:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.