How do you show marked checkbox when you cover the list?



  • Help solve the problem, there's a chequebox list, the list's hidden in the first place, when you press "Category," the checkboxes are coming. The aim is to ensure that the chequeboxes selected remain visible after the list is hidden and return to their place after the list is reopened. https://08sip.csb.app/



  • Apply. display:none not the list, but the elements of the list that do not listed input

    // вариант 1
                /*$('.publications-select__header').click(function() {
                    $('.publications-select__list-collapsed input:checkbox:not(:checked)')
                        .parent('.publications-select__item')
                        .toggle('slow');
                });*/
    
            // вариант 2
            $('.publications-select__header').click(function() {
                $('.publications-select__list-collapsed input:checkbox:not(:checked)')
                    .parent('.publications-select__item')
                    .animate({
                        height: 'toggle',
            opacity: 'toggle'
                     });
            });</code></pre><pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    

    <section>
    <!--publications-->
    <div class="container-publications container">
    <div class="publications">
    <h2 class="publications-header section-header">Издания</h2>
    <div class="publications-select">
    <h3 class="publications-select__header">Категории</h3>
    <ul class="publications-select__list-collapsed active">
    <li class="publications-select__item">
    <input type="checkbox" id="bestsellers" class="publications-select__input">
    <label for="bestsellers" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Бестселлеры</label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="art" class="publications-select__input"><label for="art" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Искусство</label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="architecture" class="publications-select__input"><label for="architecture" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Архитектура</label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="design" class="publications-select__input">
    <label for="design" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Дизайн
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="fashion" class="publications-select__input">
    <label for="fashion" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Мода
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="for-children" class="publications-select__input">
    <label for="for-children" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Детям
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="fiction" class="publications-select__input">
    <label for="fiction" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Художественная литература
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="journalism" class="publications-select__input"><label for="journalism" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Публицистика
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="travel-guides" class="publications-select__input">
    <label for="travel-guides" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Путеводители
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="philosophy" class="publications-select__input">
    <label for="philosophy" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Философия
    </label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="educational-literature" class="publications-select__input">
    <label for="educational-literature" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Учебная
    литература</label>
    <span class="publications-select__span_close"></span>
    </li>
    <li class="publications-select__item">
    <input type="checkbox" id="newspapers" class="publications-select__input">
    <label for="newspapers" class="publications-select__label" data-checked="false">
    <span class="publications-select__span_box"></span>Журналы и
    газеты</label>
    <span class="publications-select__span_close"></span>
    </li>
    </ul>
    </div>
    <div class="publications-select__warehouse"></div>
    </div>
    </div>
    </section>



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2