Вывести сумму всех значений все выбранных ячеек

[loia]

Привет всем! Помогите, пожалуйста, разобраться, как вывести сумму всех значений, в зависимости от того, какую ячейку или значение человек выберет, т.е. я уже написала калькуляторы для каждого выбора отдельно, осталось только сложить все значения в конце:

<p>Выберите тип помещения</p>
 
          <table class="table1" border=1 ">
      <tr>
       <td  class="home" data-value="1000">Квартира</td>
       <td  class="home" data-value="2000">Частный дом</td>
       <td  class="home" data-value="3000">Офис</td>
      </tr>
 
    </table>
 
      <p>ТАРИФ</p>
 
      <table class="table2" border=1>
    <tr>
    <td class="tarif" data-value="1000">Эконом</td>
    <td class="tarif" data-value="2000">Стандарт</td>
    <td class="tarif" data-value="3000">Люкс</td>
    </tr>
    </table>
        </div>
      
        <div class="col-sm">
          <p>Дополнительные работы по подключению</p>
 
      <table class="tab">
          <tr>
              <td>Теплые полы </td>
              <tr>
                <td><input type="radio" class="radioClass" name="product1" value="1000"/>Да
              <input type="radio" class="radioClass" name="product1" value="0" />Нет<hr></td>
          </tr>
 
          <tr>
 
              <td>Бойлер/Водонагреватель </td>
              <tr><td><input type="radio" class="radioClass" name="product2" value="2000" />Да
              <input type="radio" class="radioClass" name="product2" value="0"/>Нет<hr></td>
          </tr>
 
          <tr>
              <td>Электрическая варочная панель </td>
              <tr><td><input type="radio" class="radioClass" name="product3" value="3000"/>Да
              <input type="radio" class="radioClass" name="product3" value="0"/>Нет<hr></td>
          </tr>
          <tr>
              <td>Духовой шкаф </td>
              <tr><td><input type="radio" class="radioClass" name="product4" value="2000"/>Да
              <input type="radio" class="radioClass" name="product4" value="0"/>Нет<hr> </td>
          </tr>
          <tr>
              <td>Посудомоечная машина </td>
              <tr><td><input type="radio" class="radioClass" name="product5" value="2000"/>Да
              <input type="radio" class="radioClass" name="product5" value="0"/>Нет</td>
          </tr>
      </table>
      <br>
        </div>
 
      </div>
 
    <span class="summa">0</span>

$(function () {
          $("input.radioClass").click(radioHandler);
      });
 
      function radioHandler() { //* функция для выбора radio
          var form = $("form")[0];
          var sum = +form["product1"].value + +form["product2"].value + +form["product3"].value + +form["product4"].value + +form["product5"].value;
$('.sum').text(sum)
      }
 
  $(function() { //* функция для выбора помещения
      var home = $('.home');
      home.click(function(){
      home.css('background-color', 'white').removeClass('active');
      var num = $(this).css('background-color', '#22d7ff').addClass('active').data("value");
      $('.num').text(num);
      });
    });
 
$(function() { //*функция для выбора тарифа
var tarif = $('.tarif');
tarif.click(function(){
tarif.css('background-color', 'white').removeClass('active');
var num1 = $(this).css('background-color', '#22d7ff').addClass('active').data("value");
$('.num1').text(num1);
});
});

[laimas]

type="radio" name="product1"
type="radio" name="product2"
....

Может тогда флажки? И зачем они дублируют имена поле ввода при этом имея значения равные 0?

[Malleys]

Может тогда флажки?

Точно! Это как переключатель...

loia, используйте элементы по назначению, тогда всё получится! Стили в CSS, а логика в

Помогите, пожалуйста, разобраться, как вывести сумму всех значений, в зависимости от того, какую ячейку или значение человек выберет, т.е. я уже написала калькуляторы для каждого выбора отдельно, осталось только сложить все значения в конце

Выберите всех отмеченных флажков цену и сложите!
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,
может один цикл?

addEventListener("input", function(event) {
	const form = event.target.closest("#my-form");
	if(!form) return;
    let sum = 0;
    for (const {value} of form.querySelectorAll("input:checked")) sum += Number(value);
	form.querySelector("output.summa").textContent = sum;
});

[Malleys]

может один цикл?

Да, один цикл тоже может решить!

document.querySelector("#my-form").addEventListener("input", function(event) {
	this.querySelector("output.summa").textContent =
		Array.prototype.reduce.call(this.querySelectorAll("input:checked"), (s, { value }) => s + Number(value), 0)
});

[loia]

Спасибо вам большое за помощь, буду учиться делать правильно, пока еще только учусь)