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

Для реализации функционала отображения записей в зависимости от состояния чекбоксов, можно использовать JavaScript для управления видимостью записей на основе выбранных категорий. 

Допустим, у нас есть два чекбокса для категорий 1 и 2, и мы хотим отобразить записи в зависимости от их состояния:

- **0 0** - все записи
- **1 0** - записи только с категорией 1
- **0 1** - записи только с категорией 2
- **1 1** - записи, относящиеся как к категории 1, так и к категории 2

### Логика обработки чекбоксов

1. **HTML структура**:
```html
<input type="checkbox" id="category1" checked> Категория 1
<input type="checkbox" id="category2" checked> Категория 2
<button id="showRecords">Показать записи</button>

<div id="records">
    <div class="record category1">Запись 1 (Категория 1)</div>
    <div class="record category2">Запись 2 (Категория 2)</div>
    <div class="record category1 category2">Запись 3 (Категория 1 и 2)</div>
    <!-- Другие записи -->
</div>
```

2. **JavaScript для обработки событий**:
```javascript
document.getElementById('showRecords').addEventListener('click', function() {
    // Получение состояний чекбоксов
    var category1Checked = document.getElementById('category1').checked;
    var category2Checked = document.getElementById('category2').checked;

    // Получаем все записи
    var records = document.getElementsByClassName('record');
    
    // Цикл по всем записям
    for (var i = 0; i < records.length; i++) {
        // Проверяем, должен ли записаться быть виден
        var record = records[i];
        var hasCategory1 = record.classList.contains('category1');
        var hasCategory2 = record.classList.contains('category2');
        
        // Условие для отображения записи
        if ((category1Checked && hasCategory1) || (category2Checked && hasCategory2) || (!category1Checked && !category2Checked)) {
            record.style.display = 'block'; // Показываем запись
        } else {
            record.style.display = 'none'; // Скрываем запись
        }
    }
});
```

### Объяснение кода

1. **Чекбоксы** `category1` и `category2` имеют начальное состояние `checked`. Это означает, что изначально все записи будут показаны.
  
2. **Обработка события нажатия на кнопку**. Когда пользователь нажимает на кнопку "Показать записи", скрипт проверяет, какие чекбоксы отмечены.

3. **Цикл по всем записям**. Проходим по всем записям и проверяем, должен ли каждый элемент быть видимым на основе состояния чекбоксов.

4. **Условия отображения**:
   - Если отмечен чекбокс для категории 1 и запись относится к этой категории.
   - Если отмечен чекбокс для категории 2 и запись относится к этой категории.
   - Если оба чекбокса не отмечены, отображаются все записи.

Таким образом, при нажатии на кнопку "+" в зависимости от состояния чекбоксов будут отображаться соответствующие записи.

<pre><code class="javascript">const state = {
  checked: new Set,
  ...</code></pre> <br/> <pre><code class="javascript">document.querySelectorAll('.sockets').forEach(n =&gt; {
  n.addEventListener('change', onChange);
});

function onChange(e) {
  const value = +e.target.value;
  const { checked } = state;
  checked[checked.has(value) ? 'delete' : 'add'](value);
  render();
}</code></pre> <br/> <pre><code class="javascript">function render() {
  const { data, checked } = state;
  const toRender = checked.size
    ? data.filter(n =&gt; checked.has(n.category))
    : data;

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