Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Показать/скрыть элемент при клике на checkbox


Автор: Sice 13.11.2017, 11:27
Доброго времени суток друзья. У меня есть много div элементов с одинаковым классом, я хочу их сортировать (показывать / скрывать) с помощью checkbox по нескольким параметрам. Подскажите пожалуйста пример с data-*атрибутами, хочу сделать data-атрибуты: data-price, data-type, чтобы при нажати на checkbox отображались определенные div элементы, соответствующие параметрам атрибутов. Подскажите пожалуйста пример, как реализовать это.

Вариант с уникальным id такой, но мне не подходит, так как у меня много одинаковых элементов.
HTML
<input type='checkbox' onchange="document.getElementById('old_name').style.display = this.checked ? 'block' : 'none'" />ранее менялась<br />
<input type='text' class="old" id="old_name" style="display: none; " />


Заранее большое спасибо Вам.

Автор: whatisnot 13.11.2017, 19:16
Код

<html>
<head>
<meta charset="utf-8">
<style>
div[class|=group] {
    display: none;
}
</style>
</head>
<body>

<div id="control_box">
<label><input type="checkbox" value="group-1" /> Группа 1</label>
<label><input type="checkbox" value="group-2" /> Группа 2</label>
<label><input type="checkbox" value="group-3" /> Группа 3</label>
</div>

<div class="group-1">Группа 1</div>
<div class="group-1">Группа 1</div>
<div class="group-1">Группа 1</div>
<div class="group-1">Группа 1</div>
<div class="group-1">Группа 1</div>

<div class="group-2">Группа 2</div>
<div class="group-2">Группа 2</div>
<div class="group-2">Группа 2</div>

<div class="group-3">Группа 3</div>
<div class="group-3">Группа 3</div>
<div class="group-3">Группа 3</div>
<div class="group-3">Группа 3</div>

<script>
document.querySelector("#control_box").addEventListener("change", function(e) {
    var o = e.target;
    if(o.tagName=='INPUT') {
        [].forEach.call(document.querySelectorAll("."+o.value), function(e) {
            e.style.display = ['none', 'block'][+o.checked]
        })
    }
});
</script>

</body>
</html>


Обработка событий флажков делегируется их родителю <div id="control_box">, которое устанавливается скриптом, поэтому скрипт должен быть расположен после этого элемента, в данном случае в конце документа. Если скрипт предполагается размещать/подключать в шапке документа, то установку данного обработчика нужно производить по событию загрузки документа.

В данном случае используется значение флажков, но если это не желательно, можно использовать и data атрибут, в этом случае селектор "."+o.value нужно заменить на "."+o.getAttribute('data-name').   

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)