Вывести общее значение калькулятора?

Question

[Aleksandr]

В общем есть вот такая страница с калькуляторами.


вот html

<div class="calculation__calc calc1">
	<div class="calculation__select">
		<fieldset>
			<span>Тип плитки</span>
			<select id="what1">
				<option value="300" rel="300">Керамическая</option>
				<option value="700" rel="700">Керамогранит</option>
				<option value="800" rel="800">Клинкерная</option>
				<option value="800" rel="800">Мозайка</option>
			</select>
		</fieldset>
		<fieldset>
			<span>Способ укладки</span>
				<select id="how">
				<option>По диагонали</option>
				<option>Ромбом</option>
				<option>Со смещением</option>
				<option>В разбежку</option>
				<option>Бесшовная укладка</option>
				<option>Рисунок</option>
				<option>По прямой</option>
			</select>
		</fieldset>
	</div>
	<div class="calculation__radio">
		<span>Требуется демонтаж?</span>
		<div class="calculation__rad">
			<input type="radio" id="a-option" class="yeah" name="selector1">
		    <label for="a-option">Да</label>
		    <div class="check"></div>
		</div>
		<div class="calculation__rad">
			<input type="radio" id="b-option" class="none" name="selector1" checked>
		    <label for="b-option">Нет</label>
		    <div class="check"></div>
		</div>
		<span>Площадь проведения работ</span>
		<div class="calculation__calcul">
			S = <em><strong>1</strong> <i>м<sup>2</sup></i></em>
			<button class="calculation__calcul-minus"></button>
			<button class="calculation__calcul-plus"></button>
		</div>
	</div>
</div>
<div class="calculation__calc calc2">
	<div class="calculation__select">
		<fieldset>
			<span>Тип плитки</span>
			<select id="what2">
				<option value="300" rel="300">Керамическая</option>
				<option value="700" rel="700">Керамогранит</option>
				<option value="800" rel="800">Клинкерная</option>
				<option value="800" rel="800">Мозайка</option>
			</select>
		</fieldset>
		<fieldset>
			<span>Способ укладки</span>
				<select id="how">
				<option>По диагонали</option>
				<option>Ромбом</option>
				<option>Со смещением</option>
				<option>В разбежку</option>
				<option>Бесшовная укладка</option>
				<option>Рисунок</option>
				<option>По прямой</option>
			</select>
		</fieldset>
	</div>
	<div class="calculation__radio">
		<span>Требуется демонтаж?</span>
		<div class="calculation__rad">
			<input type="radio" id="c-option" class="yeah" name="selector2">
		    <label for="c-option">Да</label>
		    <div class="check"></div>
		</div>
		<div class="calculation__rad">
			<input type="radio" id="d-option" class="none" name="selector2" checked>
		    <label for="d-option">Нет</label>
		    <div class="check"></div>
		</div>
		<span>Площадь проведения работ</span>
		<div class="calculation__calcul">
			S = <em><strong>1</strong> <i>м<sup>2</sup></i></em>
			<button class="calculation__calcul-minus"></button>
			<button class="calculation__calcul-plus"></button>
		</div>
	</div>
</div>
<div class="calculation__calc calc3">
	<div class="calculation__select">
		<fieldset>
			<span>Тип плитки</span>
			<select id="what3">
				<option value="300" rel="300">Керамическая</option>
				<option value="700" rel="700">Керамогранит</option>
				<option value="800" rel="800">Клинкерная</option>
				<option value="800" rel="800">Мозайка</option>
			</select>
		</fieldset>
		<fieldset>
			<span>Способ укладки</span>
				<select id="how">
				<option>По диагонали</option>
				<option>Ромбом</option>
				<option>Со смещением</option>
				<option>В разбежку</option>
				<option>Бесшовная укладка</option>
				<option>Рисунок</option>
				<option>По прямой</option>
			</select>
		</fieldset>
	</div>
	<div class="calculation__radio">
		<span>Требуется демонтаж?</span>
		<div class="calculation__rad">
			<input type="radio" id="e-option" class="yeah" name="selector3">
		    <label for="e-option">Да</label>
		    <div class="check"></div>
		</div>
		<div class="calculation__rad">
			<input type="radio" id="f-option" class="none" name="selector3" checked>
		    <label for="f-option">Нет</label>
		    <div class="check"></div>
		</div>
		<span>Площадь проведения работ</span>
		<div class="calculation__calcul">
			S = <em><strong>1</strong> <i>м<sup>2</sup></i></em>
			<button class="calculation__calcul-minus"></button>
			<button class="calculation__calcul-plus"></button>
		</div>
	</div>
</div>
<div class="calculation__calc calc4">
	<div class="calculation__select">
		<fieldset>
			<span>Тип плитки</span>
			<select id="what4">
				<option value="300" rel="300">Керамическая</option>
				<option value="700" rel="700">Керамогранит</option>
				<option value="800" rel="800">Клинкерная</option>
				<option value="800" rel="800">Мозайка</option>
			</select>
		</fieldset>
		<fieldset>
			<span>Способ укладки</span>
				<select id="how">
				<option>По диагонали</option>
				<option>Ромбом</option>
				<option>Со смещением</option>
				<option>В разбежку</option>
				<option>Бесшовная укладка</option>
				<option>Рисунок</option>
				<option>По прямой</option>
			</select>
		</fieldset>
	</div>
	<div class="calculation__radio">
		<span>Требуется демонтаж?</span>
		<div class="calculation__rad">
			<input type="radio" id="j-option" class="yeah" name="selector4">
		    <label for="j-option">Да</label>
		    <div class="check"></div>
		</div>
		<div class="calculation__rad">
			<input type="radio" id="k-option" class="none" name="selector4" checked>
		    <label for="k-option">Нет</label>
		    <div class="check"></div>
		</div>
		<span>Площадь проведения работ</span>
		<div class="calculation__calcul">
			S = <em><strong>1</strong> <i>м<sup>2</sup></i></em>
			<button class="calculation__calcul-minus"></button>
			<button class="calculation__calcul-plus"></button>
		</div>
	</div>
</div>
<div class="calculation__st">
	<p>
		стоимость укладки плитки: <span>от<em>300</em>рублей</span>
	</p>
	<div id="calculation__st" class="calculation__st-btn">Вызвать мастера</div>
</div>

вот js

$(document).ready(function() {
	$('.calcs .calculation__calcul-plus').click(function(event) {
		var plitka = $(this).parents('.calculation__calc').find('select option:selected').val();
		var num = parseInt($(this).parent().find('strong').text(), 10)
		num++
		$(this).parent().find('strong').text(num)
		if ($('.yeah').is(':checked')) {
			var summ = num * plitka + 35;
		}else if ($('.none').is(':checked')) {
			var summ = num * plitka + 0;
		}
	});
	$('.calcs .calculation__calcul-minus').click(function(event) {
		var plitka = $(this).parents('.calculation__calc').find('select option:selected').val();
		var num = parseInt($(this).parent().find('strong').text(), 10)
		num--;
		if (num <= 0) {
			$(this).parent().find('strong').text('1')
		}else {
			$(this).parent().find('strong').text(num);
			if ($('.yeah').is(':checked')) {
				var summ = num * plitka + 35;
			}else if ($('.none').is(':checked')) {
				var summ = num * plitka + 0;
			}
			console.log(summ)
		}
	});
});

В одном калькулятора все замечательно считается. Но вопрос, как вывести общее значение (всех 4х калк-ов)?
Подскажите плиз

Answer 1

[ProjectSoft]

На самую скорую руку согласно вашего кода
https://jsfiddle.net/fztwosht/

Comments

[Aleksandr]

В итоге я сделал тоже самое, только хуже) Спасибо)

[ProjectSoft]

Александр Котов: посмотрите сейчас. Код упростил.

[Aleksandr]

ProjectSoft: Спасибо. А можете еще подсказать, как динамически менять результат при смене radio button?

[ProjectSoft]

Александр Котов: там уже это реализовано. Так же и по выбору списка.

[Aleksandr]

ProjectSoft: точно. Спасибо