Сообщение от laimas
|
Может тогда флажки?
|
Точно! Это как переключатель...
loia, используйте элементы по назначению, тогда всё получится! Стили в CSS, а логика в
Сообщение от loia
|
Помогите, пожалуйста, разобраться, как вывести сумму всех значений, в зависимости от того, какую ячейку или значение человек выберет, т.е. я уже написала калькуляторы для каждого выбора отдельно, осталось только сложить все значения в конце
|
Выберите всех отмеченных флажков цену и сложите!
JavaScript
<form id="my-form">
<fieldset>
<legend>Выберите тип помещения</legend>
<label>
<input type="radio" name="home" value="1000"> Квартира
</label>
<label>
<input type="radio" name="home" value="2000"> Частный дом
</label>
<label>
<input type="radio" name="home" value="3000"> Офис
</label>
</fieldset>
<fieldset>
<legend>Тариф</legend>
<label>
<input type="radio" name="tarif" value="1000"> Эконом
</label>
<label>
<input type="radio" name="tarif" value="2000"> Стандарт
</label>
<label>
<input type="radio" name="tarif" value="3000"> Люкс
</label>
</fieldset>
<fieldset>
<legend>Дополнительные работы по подключению</legend>
<label>
<input type="checkbox" name="product1" value="1000"> Тёплые полы
</label>
<label>
<input type="checkbox" name="product2" value="2000"> Водонагреватель
</label>
<label>
<input type="checkbox" name="product3" value="3000"> Электрическая варочная панель
</label>
<label>
<input type="checkbox" name="product4" value="2000"> Духовой шкаф
</label>
<label>
<input type="checkbox" name="product5" value="2000"> Посудомоечная машина
</label>
</fieldset>
<output class="summa">0</output>
</form>
<script>
addEventListener("input", function(event) {
const form = event.target.closest("#my-form");
if(!form) return;
const values = Array.from(
form.querySelectorAll("input:checked"),
function(control) {
return Number(control.value);
});
form.querySelector("output.summa").textContent =
values.reduce(function(s, v) { return s + v; }, 0)
});
</script>
Разметку менять не нужно для того, чтобы придать необходимый вид. Используйте CSS!