Как реализовать фильтр на js c чекбоксами?

Question

[idiumriobstenu]

Есть общий список сообщений, как для устройств, так и для отдельных устройств, и есть некий чекбокс (он один) должен фильтровать список и разделять общий список на общие сообщения и для устройств
т.е выбран чекбокс - показывает список всех сообщений НА все устройства
не выбран - показывает все сообщения, как на все устройства, так и на некоторые

<input class="w3-check" 
                       type="checkbox"  >
                <label>Отобразить все сообщения на все устройства</label>

по части js и прошу подсказать, как вернее написать, как я понимаю, кнопке и всем сообщениям надо тоже присвоить айди по которым js будет искать

Comments

[Ankhena]

Собственно это и без js решается, если нужно просто скрыть лишние.
Ставите инпут перед списком.
Сообщениям задаете data-атрибуты
Селектором по соседям скрываете или не скрываете лишние.

[idiumriobstenu]

Ankhena,

<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();

как итог скрытие работает, но все данные из строки таблицы смещаться, как бы в одну строку без разделения на столбцы

[Ankhena]

idiumriobstenu, вы как-нибудь разметку к валидной приведите.
Какие ещё div вокруг tr? Где сам table? Ну и всё такое.
Атрибут внутри tr это вообще нечто.

В js лучше манипулировать классами, чем напрямую свойствами css, особенно если это касается display.