URL скопирован в буфер обмена!

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

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

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

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

Класс формы с чекбоксами
Класс кнопки очистки
Вид чекбокса
Тип индикатора чекбокса
Цвет активного чекбокса
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD0000--> <script> function TiWait(selector, callback) { const interval = setInterval(() => { const element = document.querySelector(selector); if (element) { clearInterval(interval); callback(element); } }, 300); } function restoreCheckboxStates(form) { const TCDCheckboxes = form.querySelectorAll('input[type="checkbox"]'); TCDCheckboxes.forEach(checkbox => { if (checkbox.name) { const savedState = localStorage.getItem(checkbox.name); if (savedState !== null) { checkbox.checked = savedState === 'true'; } checkbox.addEventListener('change', function() { localStorage.setItem(checkbox.name, checkbox.checked); }); } }); } function setupResetButton(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 setupTabListener() { const tabContainer = document.querySelector('.t395__wrapper'); if (tabContainer) { tabContainer.addEventListener('click', function(event) { const clickedTab = event.target.closest('[role="tab"]'); if (clickedTab) { setTimeout(() => { const form = document.querySelector('.ti-checklist'); if (form && form.offsetParent !== null) { restoreCheckboxStates(form); } }, 100); } }); } } document.addEventListener('DOMContentLoaded', function() { TiWait('.ti-checklist', function(form) { restoreCheckboxStates(form); setupResetButton(form); }); setupTabListener(); }); </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>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block форму и присваиваем ей класс ti-checklist
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

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

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

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

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

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