Как мне показать сумму всех значений динамического радиовхода после того, как я нажму на нее в конкретном результате div с помощью jQuery?

Question

Это мой последний пост здесь, в сообществе этого кодера, потому что я спрашиваю об этом во многих отношениях, но не нашел правильного решения.Поэтому я упрощаю свой код и вставляю его сюда снова.Я не очень хорош в jquery / js, поэтому я застрял с этим кодом.

Пожалуйста, помогите мне, это будет очень полезно для меня, потому что это мой первый проект иЯ только что перешел из банковского сектора в мир программирования.Заранее благодарим за все ваши усилия и помощь.

Ниже приведен код, в котором я упомянул статическую версию HTML-части (она динамически поступает из базы данных).

var matched = $('.option_yes');
var countedItem = matched.length;

//This code is for the example purpose to show the value when hit on radio button
$(document).on('click', '.extraRoomOption:checked', function(e){
   //$('#p'+i+'_price').html($(this).val());
   alert($(this).val());
});

//This is the rubished(Because I wrote this) code that will be use in production:
var i;
for(i = 1; i <= countedItem; i++){
  $('input[name=extraRoom'+i+']').on('click', function(e){
    if($(e.target).is('#extraRoomInput_y'+i)){
      $('#p'+i+'_price').html($(this).val());
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Maggie's room type</h3>
<p>would you like your own room?</p>
<label>
  <input type="radio" class="extraRoomOption option_yes" name="extraRoom1" id="y1_extraRoomInput" value="150000">
  <b>Yes, please</b>
</label>
<label>
  <input type="radio" class="extraRoomOption option_no" name="extraRoom1" id="n1_extraRoomInput" value="125000" checked>
  <b>No, thanks</b>
</label>

<hr>

<h3>Esther's room type</h3>
<p>would you like your own room?</p>
<label>
  <input type="radio" class="extraRoomOption option_yes" name="extraRoom2" id="y2_extraRoomInput" value="150000">
  <b>Yes, please</b>
</label>
<label>
  <input type="radio" class="extraRoomOption option_no" name="extraRoom2" id="n2_extraRoomInput" value="125000" checked>
  <b>No, thanks</b>
</label>

<br>
<hr><hr>

<h2>Room type</h2>
<p>Maggie (Twin Room) And Price is <span id="p1_price">125000</span></p>
<p>Esther (Twin Room) And Price is <span id="p2_price">125000</span></p>
<p><b>Total Price is <span id="totalPrice">250000</span></b></p>

Игнорируйте это, если вы не хотите знать, как работает мой сайт.

Позвольте мне сначала объяснить, как должен работать мой веб-сайт:
1) Когда пользователь заходит на мой веб-сайт и нажимает на тур, а затем заполняет форму бронирования своей основной личной информацией.
2) После этого вся информация будет сохранена.в базу данных, а затем настроить вашу страницу поездки появится сразу после первого шага.
3) Теперь это сложная часть, где я застрял.Когда пользователь нажимает Параметр типа номера , он должен работать следующим образом: цена выбранного пассажира будет обновляться автоматически, а затем сумма итоговой цены пассажира должна отображаться в окне окончательной цены.
4) Вот моя предыдущая ссылка на вопрос:

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

5) См. Рисунок ниже:

Answer 1

Этот код может быть полезен ... Я добавил атрибут data-target для целевой цены с идентификатором.

jQuery(document).ready(function($) {
	$(document).on('click', '.extraRoomOption:checked', function(e){
		var targetPrice = $(this).data('target');
		$('#'+targetPrice).text($(this).val());
		
		grandTotal();
	});

	function grandTotal(){
		var total = 0;
		$('.extraRoomOption:checked').each(function(e){
			total += parseFloat($(this).val());
		});
		$('#totalPrice').text(total);
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Maggie's room type</h3>
<p>would you like your own room?</p>
<label>
  <input type="radio" class="extraRoomOption option_yes" name="extraRoom1" id="y1_extraRoomInput" data-target="p1_price" value="150000">
  <b>Yes, please</b>
</label>
<label>
  <input type="radio" class="extraRoomOption option_no" name="extraRoom1" id="n1_extraRoomInput" value="125000" data-target="p1_price" checked>
  <b>No, thanks</b>
</label>

<hr>

<h3>Esther's room type</h3>
<p>would you like your own room?</p>
<label>
  <input type="radio" class="extraRoomOption option_yes" name="extraRoom2" id="y2_extraRoomInput" data-target="p2_price" value="150000">
  <b>Yes, please</b>
</label>
<label>
  <input type="radio" class="extraRoomOption option_no" name="extraRoom2" id="n2_extraRoomInput" value="125000" data-target="p2_price" checked>
  <b>No, thanks</b>
</label>

<br>
<hr><hr>

<h2>Room type</h2>
<p>Maggie (Twin Room) And Price is <span id="p1_price">125000</span></p>
<p>Esther (Twin Room) And Price is <span id="p2_price">125000</span></p>
<p><b>Total Price is <span id="totalPrice">250000</span></b></p>

Answer 2

Вам необходимо добавить тег формы (с ним проще работать с полями ввода).Обратите внимание, что HTML-код практически такой же, как в вашем примере, был добавлен только тег формы.

document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('radio-form');
  var inputs = form.querySelectorAll('input[type="radio"]');

  var p1 = document.getElementById('p1_price');
  var p2 = document.getElementById('p2_price');
  var total = document.getElementById('totalPrice');

  function setPrice() {
    var room1 = form.elements['extraRoom1'];
    var room2 = form.elements['extraRoom2'];

    p1.innerHTML = room1.value;
    p2.innerHTML = room2.value;
    total.innerHTML = +room1.value + +room2.value;
  };

  Array.prototype.forEach.call(inputs, function(input) {
    input.addEventListener('change', setPrice);
  });

  setPrice();
});

<h3>Maggie's room type</h3>
<p>would you like your own room?</p>
<form id="radio-form">
  <label>
      <input type="radio" class="extraRoomOption option_yes" name="extraRoom1" id="y1_extraRoomInput" value="150000">
      <b>Yes, please</b>
    </label>
  <label>
      <input type="radio" class="extraRoomOption option_no" name="extraRoom1" id="n1_extraRoomInput" value="125000" checked>
      <b>No, thanks</b>
    </label>

  <hr>

  <h3>Esther's room type</h3>
  <p>would you like your own room?</p>
  <label>
      <input type="radio" class="extraRoomOption option_yes" name="extraRoom2" id="y2_extraRoomInput" value="150000">
      <b>Yes, please</b>
    </label>
  <label>
      <input type="radio" class="extraRoomOption option_no" name="extraRoom2" id="n2_extraRoomInput" value="125000" checked>
      <b>No, thanks</b>
    </label>
</form>

<br>
<hr>
<hr>

<h2>Room type</h2>
<p>Maggie (Twin Room) And Price is <span id="p1_price">125000</span></p>
<p>Esther (Twin Room) And Price is <span id="p2_price">125000</span></p>
<p><b>Total Price is <span id="totalPrice">250000</span></b></p>

Исправьте код, если необходимо.Я надеюсь, что помог тебе.