Как реализовать фильтр на js c чекбоксами?
Есть общий список сообщений, как для устройств, так и для отдельных устройств, и есть некий чекбокс (он один) должен фильтровать список и разделять общий список на общие сообщения и для устройств
т.е выбран чекбокс - показывает список всех сообщений НА все устройства
не выбран - показывает все сообщения, как на все устройства, так и на некоторые
<input class="w3-check" type="checkbox" > <label>Отобразить все сообщения на все устройства</label> |
<input class="w3-check" type="checkbox" > <label>Отобразить все сообщения на все устройства</label>
по части js и прошу подсказать, как вернее написать, как я понимаю, кнопке и всем сообщениям надо тоже присвоить айди по которым js будет искать
Дополнительно:
Собственно это и без js решается, если нужно просто скрыть лишние.
Ставите инпут перед списком.
Сообщениям задаете data-атрибуты
Селектором по соседям скрываете или не скрываете лишние.
<div class="checkbox"> <label><input type="checkbox" rel="india"/>India</label> </div> /////////////другой код//////////////// /////////////вывожу данные таблицей//////////////// <div class="india"> <tr onclick="location.href = '/admin/messages/messages.php?ID=1132'" div class="india" > <td class='w3-center'>Сообщение разослано всем</td> <td class='w3-center'>Сообщение разослано всем</td> <td class='w3-center w3-hide-small'>всем приставкам</td> <td class='w3-center w3-hide-small'>2023-05-28 15:48:37</td> <td class='w3-center w3-hide-small'>Сообщение нельзя перевести в статус прочитано</td> </tr> </div> |
<div class="checkbox"> <label><input type="checkbox" rel="india"/>India</label> </div> /////////////другой код//////////////// /////////////вывожу данные таблицей//////////////// <div class="india"> <tr onclick="location.href = '/admin/messages/messages.php?ID=1132'" div class="india" > <td class='w3-center'>Сообщение разослано всем</td> <td class='w3-center'>Сообщение разослано всем</td> <td class='w3-center w3-hide-small'>всем приставкам</td> <td class='w3-center w3-hide-small'>2023-05-28 15:48:37</td> <td class='w3-center w3-hide-small'>Сообщение нельзя перевести в статус прочитано</td> </tr> </div>
var checkboxes = document.querySelectorAll('[type="checkbox"]'); var fnDisplayDivs = () => { Array.from(checkboxes).forEach(function(checkBox) { var div = document.querySelector("." + checkBox.getAttribute("rel")); if (checkBox.checked) { div.style.display = "block"; } else { div.style.display = "none"; } }) }; Array.from(checkboxes).forEach(function(checkBox) { checkBox.addEventListener( "change", function(){ fnDisplayDivs(); }) }); fnDisplayDivs(); |
var checkboxes = document.querySelectorAll('[type="checkbox"]'); var fnDisplayDivs = () => { Array.from(checkboxes).forEach(function(checkBox) { var div = document.querySelector("." + checkBox.getAttribute("rel")); if (checkBox.checked) { div.style.display = "block"; } else { div.style.display = "none"; } }) }; Array.from(checkboxes).forEach(function(checkBox) { checkBox.addEventListener( "change", function(){ fnDisplayDivs(); }) }); fnDisplayDivs();
как итог скрытие работает, но все данные из строки таблицы смещаться, как бы в одну строку без разделения на столбцы
Какие ещё div вокруг tr? Где сам table? Ну и всё такое.
Атрибут внутри tr это вообще нечто.
В js лучше манипулировать классами, чем напрямую свойствами css, особенно если это касается display.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации фильтра на JavaScript с помощью чекбоксов, вам потребуется следующий подход:
1. Создайте HTML разметку, в которой будут размещены чекбоксы и элементы, которые нужно отфильтровать. Например:
```html
```
2. Напишите JavaScript функцию `filterItems()`, которая будет скрывать или показывать элементы в зависимости от выбранных чекбоксов. Вот пример реализации:
```html
function filterItems() {
const filters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(checkbox => checkbox.id);
const items = Array.from(document.querySelectorAll('.item'));
items.forEach(item => {
const itemFilters = item.getAttribute('data-filter').split(' ');
if (filters.every(filter => itemFilters.includes(filter))) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
}
```
3. После этого, при изменении состояния любого чекбокса будет вызываться функция `filterItems()`, которая будет скрывать или показывать элементы в соответствии с выбранными фильтрами.
Таким образом, вы сможете реализовать фильтр на JavaScript с использованием чекбоксов. Надеюсь, этот ответ поможет вам решить вашу задачу!