Делаю кастомный калькулятор на Tilda, как по клику на картинку выбрать нужную галочку?

Question

[Letvintsev]

Всем доброго времени суток!

Помогите пожалуйста неумехе решить задачку с кодом.
У тильды есть довольно функциональная форма которая может калькулировать результаты от заполненных, но мне не нравится как она выглядит, я решил что можно накидать своих картинок за место галочек, и отдельных форм чтобы располагать их как мне заблагорассудится. И в зависимости от того на какую картинку кликнуть мне нужно чтобы выбирался нужный чекбокс.
(та форма с галочками будет скрыта и понадобится только для калькулирования)

$('.krep1').click(function(){
$('input[name="krep1"]').trigger('click');
});

Этот вариант работает на одиночный чек бокс, но не на ту форму с несколькими вариантами галочек
Как-то нужно сделать чтобы первая картинка соответствовала первой галочке и т.д.

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

Comments

[Ankhena]

Не знаю, что там в Тильде, но в обычном HTML для этого есть label.

Answer 1

[Александр]

Может стилями? В фон тега label.

Answer 2

[ANKU]

Чтобы дать точный ответ, надо увидеть макет формы.
Но должно быть что-то типа
V1 - jQuery

$(document).ready(() => {
  // Все элементы с классом img-N
  $('[class*="img-"]').on('click', function() {
    const $img = $(this);
    // Среди классов img-<число>
    const imgClass = $img.attr('class')
      .split(/\s+/)
      .find(c => /^img-\d+$/.test(c));
    if (!imgClass) return;

    const idx = imgClass.split('-')[1];
    const $checkbox = $(`input[name="check-${idx}"]`);
    if (!$checkbox.length) return;

    // Тогглим класс и состояние чекбокса
    const isActive = $img.toggleClass('active').hasClass('active');
    $checkbox.prop('checked', isActive);
  });
});

V2 - Vanilla

document.addEventListener('DOMContentLoaded', () => {
  // Все элементы с классом img-N
  const images = document.querySelectorAll('[class*="img-"]');

  images.forEach(img => {
    img.addEventListener('click', () => {
      // Класс вида img-N
      const imgClass = img.className
        .split(/\s+/)
        .find(c => /^img-\d+$/.test(c));
      if (!imgClass) return;

      const idx = imgClass.split('-')[1];
      const checkbox = document.querySelector(`input[name="check-${idx}"]`);
      if (!checkbox) return;

      // Тогглим класс и состояние чекбокса
      const isActive = img.classList.toggle('active');
      checkbox.checked = isActive;
    });
  });
});