Показать сообщение отдельно
  #3 (permalink)  
Старый 13.11.2019, 12:06
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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!

Последний раз редактировалось Malleys, 13.11.2019 в 12:09.
Ответить с цитированием