Как сделать чекбоксы с функцией памяти на Tilda

С помощью этой модификации можно создать чекбоксы, которые будут сохранять своё состояние в кэш. Дополнительно можно добавить кнопку для сброса всех чекбоксов. Модификация отлично подойдёт для создания чек-листов, списков задач и других списков с возможностью отслеживания прогресса.

Модификация обновлена. Модификация теперь работает с несколькими формами. Можно разбивать одну форму на множество мелких и присваивать всем одинаковый класс.

Модификация работает с включенным Autoscale в блоках

Модификация работает с Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Класс формы с чекбоксами

Класс кнопки очистки

Вид чекбокса

Тип индикатора чекбокса

Цвет активного чекбокса

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<script> function TiWait(selector, callback) { const TCDstart = setInterval(() => { const TCDtildaforms = document.querySelectorAll(selector); if (TCDtildaforms.length) { clearInterval(TCDstart); callback(TCDtildaforms); } }, 300); } function TiCodeCheckboxRestore(form) { const TCDCheckboxes = form.querySelectorAll('input[type="checkbox"]'); TCDCheckboxes.forEach(checkbox => { if (checkbox.name) { const TCDsavedState = localStorage.getItem(checkbox.name); if (TCDsavedState !== null) { checkbox.checked = TCDsavedState === 'true'; } checkbox.addEventListener('change', function() { localStorage.setItem(checkbox.name, checkbox.checked); }); } }); } function TiCodeButton(form) { const TCDresetButton = document.querySelector('.ti-remove'); const TCDCheckboxes = form.querySelectorAll('input[type="checkbox"]'); if (TCDresetButton) { TCDresetButton.addEventListener('click', function() { TCDCheckboxes.forEach(checkbox => { checkbox.checked = false; localStorage.removeItem(checkbox.name); }); }); } } function TiCodesetupTabr() { const TCDtabContainer = document.querySelector('.t395__wrapper'); if (TCDtabContainer) { TCDtabContainer.addEventListener('click', function(event) { const TCDclickedTab = event.target.closest('[role="tab"]'); if (TCDclickedTab) { setTimeout(() => { const forms = document.querySelectorAll('.ti-checklist'); forms.forEach(form => { if (form && form.offsetParent !== null) { TiCodeCheckboxRestore(form); } }); }, 100); } }); } } document.addEventListener('DOMContentLoaded', function() { TiWait('.ti-checklist', function(forms) { forms.forEach(form => { TiCodeCheckboxRestore(form); TiCodeButton(form); }); }); TiCodesetupTab(); }); </script> <style> .ti-remove { cursor: pointer; } .ti-checklist input[type=checkbox]:checked + .t-checkbox__indicator, .ti-checklist input[type=checkbox]:checked + .t-checkbox__indicator:after { border-color: #F96855 !important; } .ti-checklist input[type=checkbox]:checked +.t-checkbox__indicator + span { opacity: 0.5; text-decoration: line-through; } .ti-checklist input[type="checkbox"]:checked + .t-checkbox__indicator:before { background: #F96855; content: ''; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; opacity: 0; } .ti-checklist .t-checkbox__indicator { } </style> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем в Zero Block форму и присваиваем ей класс ti-checklist
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

При необходимости можно создать несколько отдельных форм с чек-боксами и присвоить общий класс.

В форме очищаем все поля и добавляем поля "Checkbox". Каждому чек-боксу в настройках формы присваиваем уникальную переменную (variable name)

2. При необходимости создаем кнопку очистки чек-боксов. Для этого добавляем в зеро блок кнопку и присваиваем ей класс ti-remove

3. Указываем дополнительные настройки в генераторе:
Вид чек-бокса - выбираем круглый или квадратный вид;
Тип индикатора - выбираем галочку или закрашивание активного чек-бокса;
Цвет активного чек-бокса - указываем цвет активного чек-бокса. Цвет неактивного чек-бокса указываем в настройках формы;

4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блока.

Примечание: скрипт пишет состояние чек-боксов в кеш бразера. Если пользователь сбросил кеш или зашел с другого устройства или браузер, то состояние чек-боксов сбросит. Если нужно принудительно сбросить состояние чек-боксов у всех пользователей, то нужно в форме чек-боксам задать новые название в переменных.

Чек-лист: проверка сайта перед сдачей заказчику