Как сделать если чекбоксы были пустые выводились все записи?

Question

[Tema Ovchinnnikov]

checked
0 0 - все записи ?
1 0 с категорией 1 +
0 1 с категорией 2 +
1 1 с категорией 1 и 2 +
При нажатии кнопки +
При checked в html +

Проблема при проверке после удаления (3) [empty × 3] не проходит проверку:

Array.isArray(state.arr) && state.arr.length === 0 && state.arr !== undefined

 element.addEventListener("change", function (e) {
    e.target.checked
      ? (state.arr[index] = e.target.value)
      : delete(state.arr[index]);

Answer 1

[0xD34F]

Вместо массива можно воспользоваться множеством для хранения выбранных значений, так будет проще:

const state = {
  checked: new Set([
    // если какие-то категории должны быть выбраны изначально, то их следует перечислить здесь
  ]),
  ...

По событию change добавляем или удаляем значение в/из множества, в зависимости от состояния чекбокса:

document.querySelectorAll('.sockets').forEach(n => {
  n.checked = state.checked.has(+n.value);
  n.addEventListener('change', onChange);
});

function onChange({ target: t }) {
  state.checked[t.checked ? 'add' : 'delete'](+t.value);
  render();
}

Если множество пустое - выводим всё, что есть; не пустое - предварительно выполняем фильтрацию:

function render() {
  const { data, checked } = state;
  const toRender = checked.size
    ? data.filter(n => checked.has(n.category))
    : data;

  document.querySelector('#root').innerHTML = toRender
    .map(n => `<h6>${n.name}</h6>`)
    .join('');
}

render();