Еще раз - не надо увлекаться идентификаторами, в данном случае, это зло.
Для решения этой задачи (специфики расчета) нужно разбить поля ввода на группы по типу стен используя классы. При этом назначение обработчика полей ввода остается прежним - первое, это обработка ввода, второе расчет площадей.
Шаблон замены запятой на точку при вводе в поле изменен на /[,\.]+/ с прежнего /,/. Я не буду уточнять почему, попробуйте понять сами, можно руководствоваться при этом
этим. Не получится, тогда можно и пояснить.
Идентификатором группы является ее класс, он же определяет формулу расчета площадей. Вывод площадей производится циклом, так как их несколько, согласно их индексу в наборе.
При смене единиц перерасчет площадей в этом же обработчике, без триггера. В остальном все осталось прежним, благодаря как раз тому, что обрабатывается сразу коллекция полей и элементов.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function calculate(group, values) {
var a, b;
switch(group) {
case 'rectangle': a = values[0] * values[1], b = values[2] * values[3];
return [a, b, a && b ? (a + b) * 2 : 0];
break;
case 'triangle': a = values[0] * values[1] * .5, b = (values[2] + values[3]) * values[4] * .5;
return [a, b, a && b ? (a + b) * 2 : 0];
}
}
$(function() {
var dim = ['мм',,'м'], //единицы измерения
side = $('input.rectangle, input.triangle') //получаем и кешируем все поля ввода
.on('keyup', function() {
//обработка ввода в поле
this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
//имя группы определяющее задачи
var group = this.className,
//получаем значения всех полей ввода текущей группы
values = $.map(side.filter('.'+group), function(e) {
var v = parseFloat(e.value);
return v || 0
}),
//получаем текущие единицы измерения
u = +unit.filter(':checked').val(),
//производим расчет
area = calculate(group, values);
//получаем элементы вывода площадей текущей группы и выводим результаты расчета
$(this).closest('div.'+group).find('.area').each(function(i, e) {
$(e).text(
area[i] ? area[i].toFixed(u) + ' ' + dim[u]+'²' : ''
)
})
}),
unit = $('[name="unit"]')
.change(function() {
var u = +this.value;
$('.unit').text(dim[u]);
side.val(function() {
//добавлено в свете подумать, почему нужен шаблон /[,\.]+/ вместо /,/
var v = parseFloat(this.value);
if(v) return u
? v / 1000
: v * 1000
});
//изменить рассчитанные площади в соответствии выбранных единиц
$('span.area').text(function(i, v) {
v = parseFloat(v);
if(v) return (u ? v / 1000 : v * 1000).toFixed(u) + ' ' + dim[u]+'²'
})
});
});
</script>
</head>
<body>
<label><input type="radio" name="unit" value="2" checked="" /> метры</label>
<label><input type="radio" name="unit" value="0" /> миллиметры</label>
<h3>Площадь стен первой комнаты</h3>
<p>Четыре стены прямоугольные - противоположные стены равны</p>
<div class="row plos rectangle">
<div class="col-sm-4">
<h4>Стена 1</h4>
<div class="st1">Длина стены: </div>
<div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
</div>
<div class="col-sm-4">
<h4>Стена 2</h4>
<div class="st1">Длина стены: </div>
<div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="rectangle" /> <span class="unit">м</span></div>
</div>
<div class="col-sm-4">
Площадь стены 1: <span class="area"></span><br>
Площадь стены 2: <span class="area"></span><br>
ПЛОЩАДЬ СТЕН КОМНАТЫ: <span class="area"></span>
</div>
</div>
<h3>Площадь второй комнаты</h3>
<p>Две стены треугольные, две трапецеобразные. Противоположные стены равны</p>
<div class="row plos triangle">
<div class="col-sm-4">
<h4>Треугольная стена</h4>
<div class="st1">Длина основания: </div>
<div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
</div>
<div class="col-sm-4">
<h4>Стена трапеция</h4>
<div class="st1">Длина основания: </div>
<div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
<div class="st1">Длина потолка: </div>
<div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="triangle" /> <span class="unit">м</span></div>
</div>
<div class="col-sm-4">
Площадь треугольной стены: <span class="area"></span><br>
Площадь трапецеобразной стены: <span class="area"></span><br>
ПЛОЩАДЬ СТЕН КОМНАТЫ: <span class="area"></span>
</div>
</div>
</body>
</html>