<select>
<optgroup label="легковой автомобиль">
<optgroup label="Объем двигателя">
<option value="auto1-1">Менее 2000 куб.см.</option>
<option value="auto1-2">от 2001 до 3001 куб. см.</option>
<option value="auto1-3">свыше 3001 куб. см.</option>
</optgroup>
</optgroup>
<option value="auto5">троллейбус</option>
<option value="auto6">мототранспорт</option>
</select>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check4">
<label class="form-check-label name__input" for="check4">
Диагностическая карта о прохождении технического осмотра
</label>
</div>
<div id="result"></div>
const coefficients = {
'auto1-1': 1.4,
'auto1-2': 1.2,
'auto1-3': 1.0,
'auto5': 0.9,
'auto6': 0.8,
};
const select = document.querySelector('select');
const result = document.querySelector('#result');
const check = document.querySelector('#check4');
const update = () => {
const cType = coefficients[select.value];
const cDiag = check.checked ? 0.8 : 1;
const total = 1680 * cType * cDiag;
result.innerText = `Итоговая цена: ${total.toFixed(2)} руб`;
}
update(); // initial
select.addEventListener('change', update);
check.addEventListener('change', update);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.