Готовий скрипт калькулятора послуг на jquery

Розглянемо створення простого калькулятора послуг на jQuery на прикладі послуг по ремонту квартир і дизайну інтер'єрів.

Для нас головне, щоб все виглядало красиво, при виборі / зміну параметрів сума послуги повинна відразу перераховуватися і оновлюватися. Принцип розрахунку вартості цього скрипта наступний: задається вартість ремонту 1 кв. м. задаються поправочні коефіцієнти, які збільшують або зменшують загальну вартість кв.м. Далі за формулою з урахуванням введеної площі і обраних коефіцієнтів розраховується підсумкова сума.

Живий приклад. де можна покликати. Посилання на скачування початкових кодів під статтею.

Розкриваємо блок з параметрами при натисканні з плавною анімацією. замінюємо кнопку розрахувати вартість на . в який буде підставлятися розрахована сума.

Візуально виділяємо відмічені параметри, додаючи до них свій CSS клас .check-param. причому в блоці з параметрами повинен бути виділений тільки один.

Пишемо функцію, яка обчислює значення введених і вибраних параметрів, розраховує суму за формулою і підставляє в Підсумок: 1000000 рублів. Значення з поля input для введення площі отримуємо використовуючи метод .val (). Для обчислення коефіцієнтів у вибраних параметрів використовуємо метод .attr (). При цьому у відповідних div елементів повинні бути прописані атрибути data з потрібними значеннями.

Залишається повісити обробник на блок з калькулятор, і при зміні одного з параметрів запускати функцію розрахунку вартості.

Робочий приклад зі скриптом калькулятора. html версткою і css стилями можна скачати в zip архіві. Скрипт можна легко доопрацювати під свої вимоги.