Как сделать клик по картинке для выбора чекбокса в Тильде и вывести результат

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

Проблема: одиночный клик работает, а группа чекбоксов - нет

Когда вы используете код $('.krep1').click(function(){ $('input[name="krep1"]').trigger('click'); });, он срабатывает только для одного элемента с классом krep1. Если у вас несколько картинок и несколько чекбоксов, нужно каждому изображению сопоставить свой уникальный идентификатор.

Решение: связываем картинки с чекбоксами через data-атрибуты

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

Пример HTML-разметки

<img src="img1.jpg" class="custom-checkbox" data-checkbox="input[name='option1']">
<img src="img2.jpg" class="custom-checkbox" data-checkbox="input[name='option2']">
<input type="checkbox" name="option1" style="display:none">
<input type="checkbox" name="option2" style="display:none">

Код jQuery

$('.custom-checkbox').click(function(){
  var target = $(this).data('checkbox');
  $(target).trigger('click');
});

Теперь при клике на любую картинку с классом custom-checkbox будет найден соответствующий чекбокс и симулирован клик по нему. Это работает для неограниченного количества пар.

Визуальная обратная связь: подсветка активной картинки

Чтобы пользователь видел, какой вариант выбран, добавьте класс active при клике. Используйте метод toggleClass или проверяйте состояние чекбокса через is(':checked').

Пример с подсветкой

$('.custom-checkbox').click(function(){
  var target = $(this).data('checkbox');
  $(target).prop('checked', !$(target).prop('checked'));
  $(this).toggleClass('selected');
});

В CSS пропишите стили для класса .selected, например, рамку или затемнение.

Как вывести результат калькулятора Тильды на сайт

В форме Тильды каждому полю можно присвоить уникальное имя (например, result). После расчёта значение сохраняется в атрибуте value скрытого поля или в тексте элемента с классом .t-form__result.

Способ 1: через класс результата

В стандартной форме результат выводится в блок с классом .t-form__result. Вы можете скопировать его текст в свой абзац при клике на кнопку:

$('#myButton').click(function(){
  var resultText = $('.t-form__result').text();
  $('#outputParagraph').text(resultText);
});

Способ 2: через скрытое поле с именем

Если вы задали полю имя result, используйте селектор input[name="result"]:

$('#myButton').click(function(){
  var resultValue = $('input[name="result"]').val();
  $('#outputParagraph').text(resultValue);
});

Полный пример для Tilda

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

• Каждой картинке добавьте data-checkbox с именем нужного чекбокса.
• Напишите обработчик клика, который переключает чекбокс и добавляет/убирает класс active.
• Кнопке «Рассчитать» или «Показать результат» назначьте событие, которое читает значение из .t-form__result и вставляет его в ваш <p>.

Не забудьте подключить jQuery, если он ещё не подключён на странице (в Тильде он обычно есть по умолчанию).

Заключение

Таким образом, вы можете полностью кастомизировать внешний вид формы калькулятора в Tilda, сохранив его функциональность. Используйте data-атрибуты для связи элементов и не бойтесь экспериментировать с jQuery. Если возникнут вопросы - пишите в комментариях!