Всем привет! Есть калькулятор с ценами. Но сейчас нужно немного расширить функционал:
Сейчас он работает так каждый option c заданной ценой. Показывает значение в checkboxсами и option
Вопрос: Как реализовать, если поставить например "Эмалировка1" то и соотвественно список с ценами менялся тоже?
Вот ссылка на код:
https://jsfiddle.net/jjwcj24m/
Вставлю еще здесь.
При выборе:
Сейчас:
Эмалировка1
Размер ванны: Маленькая цена: 300 руб
Реализовать:
Эмалировка2
Размер ванны: Маленькая цена: 350руб
<table border="1">
<tr style="background:#cfc;"><td>Услуга:</td><td>Цена</td></tr>
<tr><td>
<select id="one" class="bath">
<option value="0руб">Эмалировка...</option>
<option value="350руб">Эмалировка 1</option>
<option value="450руб">Эмалировка 2</option>
<option value="550руб">Эмалировка 3</option>
</select>
</td><td>
<!-- зависимость с первым selector -->
<input type="text" value="0руб" id="t_one" class="price">
</td></tr>
<tr><td>
<select id="two" class="bath">
<option value="0руб">Размер ванны...</option>
<option value="650руб">Маленькая</option>
<option value="750руб">Средняя</option>
<option value="850руб">Большая</option>
</select>
</td><td>
<!-- зависимость с вторым selector -->
<input type="text" value="0руб" id="t_two" class="price">
</td></tr>
<tr><td>
<select id="three" class="bath">
<option value="0руб">Цвет...</option>
<option value="950руб">красный</option>
<option value="1050руб">синий</option>
<option value="1150руб">зеленый</option>
</select>
</td><td>
<!-- зависимость с третьим selector -->
<input type="text" value="0руб" id="t_three" class="price">
</td></tr>
<tr><td>
<input type="checkbox" value="1250руб" id="bath" class="bort"><label for="bath">Установка уголка по бортам ванны</label>
</td><td>
<!-- зависимость с первым radio -->
<input type="text" value="0руб" id="t_bath" class="price">
</td></tr>
<tr><td>
<input type="checkbox" value="1350руб" id="sink" class="bort"><label for="sink">Установка сливной системы</label>
</td><td>
<!-- зависимость с вторым radio -->
<input type="text" value="0руб" id="t_sink" class="price">
</td></tr>
<tr><td>
<input type="checkbox" value="1450руб" id="screen" class="bort"><label for="screen">Установка экрана под ванну</label>
</td><td>
<!-- зависимость с третьим radio -->
<input type="text" value="0руб" id="t_screen" class="price">
</td></tr>
<tr><td>
<input type="checkbox" value="1550руб" id="counter" class="bort"><label for="screen">Установка счетчиков горячей и холодной воды</label>
</td><td>
<!-- зависимость с четвертым radio -->
<input type="text" value="0руб" id="t_counter" class="price">
</td></tr>
<tr><td>
<input type="checkbox" value="1650руб" id="inspection" class="bort"><label for="inspection">Проверка счетчиков</label>
</td><td>
<!-- зависимость с пятым radio -->
<input type="text" value="0руб" id="t_inspection" class="price">
</td></tr>
<tr><td>
Итого
</td><td>
<!-- в этом inpute подсчет стоимости всех выбранных значений -->
<input type="text" value="0руб" id="t_summ">
</td></tr>
</table>
$(document).ready(function () {
$('select.bath').change(function(){
var id = $(this).attr('id');
$('#t_'+id).val($(this).val());
calc();
});
$('input.bort').click(function(){
var chk = $(this).prop('checked'),
id = $(this).attr('id');
$('#t_'+id).val(chk ? $(this).val() : '0руб');
calc();
});
function calc(){
var sum = 0;
$('input.price').each(function(){
sum += parseInt($(this).val());
});
$('#t_summ').val(sum+'руб');
}
});
