Online калькулятор для сайта jQuery

В этой статье мы расскажем как реализовать на сайте online калькулятор. Для чего он нужен? Калькулятор позволяет посетителю сайта самостоятельно, в онлайн режиме посчитать стоимость товаров или услуг. Для примера мы возьмем свадебную тематику. Пользователь заходит на наш сайт и мы предлагаем ему рассчитать примерный бюджет. Удобно и понятно без лишних звонков, заполнений форм, обращений к консультантам.

Для начала подключаем библиотеку jQuery и пишем код, который будет суммировать выбранные пункты.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(function(){
	$("#price").click(function(){
		var sum=0; // начальное значение можно указать любое
		$('#price :checked').each(function(){
			sum+=parseInt($(this).val());
		});
		$('.sum').text(sum);	
	});
});
</script>

Теперь сама форма

<div id="price">
	<input type="checkbox" id="box1" name="box1" value="10000"><label for="box1">Фотограф - 10000 руб.</label><br />
	<input type="checkbox" id="box2" name="box2" value="15000"><label for="box2">Тамада - 15000 руб.</label><br />
	<input type="checkbox" id="box3" name="box3" value="3000"><label for="box3">Аренда лимузина - 3000 руб.</label><br />
	<input type="checkbox" id="box4" name="box4" value="2500"><label for="box4">Украшение зала- 2500 руб.</label><br />
</div>
<p>Итого: <span class="sum">0</span> руб.</p>

Вот так легко и просто.

Демонстрация