Здравствуйте!
Прошу вашей помощи в решении задачи с кодом. У меня есть форма на Tilda, которая эффективно рассчитывает результаты на основе заполненных полей, однако внешний вид её меня не устраивает. Я решил заменить стандартные галочки на собственные изображения и расположить их так, как мне хочется. Важно, чтобы при клике на определенное изображение выбирался соответствующий чекбокс. При этом форма с галочками будет скрыта и нужна только для расчетов.
В приведенном ниже коде используется jQuery, и он работает для одиночного чекбокса, но я хочу адаптировать его для формы с несколькими вариантами галочек:
<pre><code class="javascript">$('.krep1').click(function(){
$('input[name="krep1"]').trigger('click');
});</code></pre>
Как можно сделать так, чтобы каждое изображение соответствовало своему чекбоксу?
Кроме того, у меня возникла еще одна задача: мне нужно вывести результат, рассчитанный в форме, в текстовом виде на сайте. Я знаю, что можно присвоить имя результирующему значению, но не могу понять, как сослаться на него и вывести в текстовом абзаце при нажатии на кнопку.
Буду признателен за вашу помощь!
Привет! Давайте разберемся с вашей задачей по порядку.
### 1. Привязка изображений к чекбоксам
Вы можете настроить каждое изображение так, чтобы при нажатии на него срабатывал соответствующий чекбокс. Для этого вам нужно связывать каждое изображение с конкретным чекбоксом. Для этого можно использовать атрибут `data-`, который даст вам возможность указать, какой именно чекбокс нужно активировать при клике на изображение.
Например, предположим, у вас есть несколько чекбоксов с названиями `option1`, `option2`, и т.д. Код HTML для чекбоксов и изображений может выглядеть так:
```html
<input type="checkbox" name="option1" id="option1" style="display: none;">
<img class="option-img" data-target="option1" src="image1.png" alt="Option 1">
<input type="checkbox" name="option2" id="option2" style="display: none;">
<img class="option-img" data-target="option2" src="image2.png" alt="Option 2">
```
Теперь ваш jQuery код будет выглядеть следующим образом:
```javascript
$('.option-img').click(function() {
const targetCheckbox = $(this).data('target');
$('#' + targetCheckbox).trigger('click');
});
```
### 2. Получение и отображение результата в текстовом виде
Чтобы извлечь значение результата из формы и отобразить его на странице по нажатию кнопки, вы можете использовать следующий код jQuery:
```html
<button id="calculate">Рассчитать</button>
<p id="result"></p>
```
И вот код для обработки нажатия на кнопку и вывода результата:
```javascript
$('#calculate').click(function() {
// Получаем значение результата, предположим, оно находится в элементе с id="resultValue"
const resultValue = $('#resultValue').val(); // Или используйте .text() если значение уже отображается
$('#result').text(resultValue);
});
```
В этом коде мы используем jQuery для получения значения из элемента (например, из текстового поля или другого элемента формы) и выводим его в параграф с id `result`.
### Итоговый код
Объединив все вместе, ваши скрипты могут выглядеть как-то так:
```html
<input type="checkbox" name="option1" id="option1" style="display: none;">
<img class="option-img" data-target="option1" src="image1.png" alt="Option 1">
<input type="checkbox" name="option2" id="option2" style="display: none;">
<img class="option-img" data-target="option2" src="image2.png" alt="Option 2">
<button id="calculate">Рассчитать</button>
<p id="result"></p>
<input type="hidden" id="resultValue" value="Ваш результат" /> <!-- Или получите его из вашего калькулятора -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.option-img').click(function() {
const targetCheckbox = $(this).data('target');
$('#' + targetCheckbox).trigger('click');
});
$('#calculate').click(function() {
const resultValue = $('#resultValue').val(); // Получаем значение результата
$('#result').text(resultValue); // Отображаем его в абзаце
});
</script>
```
Не забудьте протестировать и адаптировать код под свои нужды! Если у вас есть дополнительные вопросы, смело спрашивайте.
Может стилями? В фон тега label.