За последние 24 часа нас посетили 17788 программистов и 1625 роботов. Сейчас ищут 1320 программистов ...

checkbox - show/hide div

Тема в разделе "JavaScript и AJAX", создана пользователем Horus1613, 9 апр 2018.

  1. Horus1613

    Horus1613 Новичок

    С нами с:
    25 май 2017
    Сообщения:
    34
    Симпатии:
    0
    HTML:
    1.  
    2. <input type="checkbox" class="filter" />
    3.  
    4. <?php foreach ( $get_clients as $key => $val ) { ?>
    5. <div <?php echo ($val['filter'] == '2') ? 'id="filter"' : '' ?> >
    6. <?php echo htmlspecialchars($val['name']) ?>
    7. </div>
    8. <?php } ?>
    9.  
    Код (Javascript):
    1. $(function () {
    2.   $('.filter').change(function () {
    3.      $('#filter').toggle(this.checked);
    4.   }).change();
    5. });

    Добрый. Нужно чтобы при включении чекбокса, показывались все ($val['filter'] == '2'), а при отключении, соответственно, скрывались. Приведенный код, скрывает/показывает только один элемент, а не проходит по всему циклу. Просьба подсказать решение.
     
  2. vvas

    vvas Новичок

    С нами с:
    9 апр 2018
    Сообщения:
    50
    Симпатии:
    10
    Похоже ты в цикле создаёшь один и тот же id? Это неправильно, идентификатор должен быть только в единственном числе на странице. Так работают с class, а не с id! К классу соответственно подойдёт селектор
    Код (Text):
    1. ...'class="filter"'
    2. ...
    3. $('.filter')
     
  3. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.593
    Симпатии:
    362
    @Horus1613, примерчик:
    HTML:
    1. <input type="checkbox" id="filter">
    2. <div class="filter" data-value="2">1</div>
    3. <div class="filter" data-value="1">2</div>
    4. <div class="filter" data-value="2">3</div>
    5. <div class="filter" data-value="1">4</div>
    6. <div class="filter" data-value="2">5</div>
    7.     $('#filter').change(function () {
    8.         if(this.checked) {
    9.             $('.filter[data-value="2"]').hide();
    10.         } else {
    11.             $('.filter[data-value="2"]').show();
    12.         }
    13.     }).change();
     
    #3 Sail, 9 апр 2018
    Последнее редактирование: 9 апр 2018
  4. Horus1613

    Horus1613 Новичок

    С нами с:
    25 май 2017
    Сообщения:
    34
    Симпатии:
    0
    Большое спасибо!
    --- Добавлено ---
    Спасибо! Но этот код почему-то не заработал. Сделал, как было у меня, только id поменял на class