VPF::Показать/скрыть элемент при клике на checkbox

Sice

Дата 13.11.2017, 11:27 (ссылка)

(нет голосов)

Загрузка ...

Радио Онлайн

Профиль
Группа: Участник
Сообщений: 62
Регистрация: 4.12.2007

Репутация: нет
Всего: 0

Доброго времени суток друзья. У меня есть много 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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: нет
Всего: 2

Код


<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').

Это сообщение отредактировал(а) whatisnot - 13.11.2017, 19:21

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »