如何在使用 jQuery 在特定结果 div 中单击它后显示所有动态无线电输入值的总和？

Question

这是我最后一次 post 来到这个编码员社区，因为我以多种方式提出这个问题，但没有得到正确的解决方案。所以我简化了我的代码并再次粘贴到这里。我在 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>

Ignore this if you don't want to know about how my website is working.

Let me explain first how my website should be work :
1) When a user come to my website and click on tour and then fill booking form with his basic personal information.
2) After that all information will be save into the database and then the tailor your trip page appear just after the first step.
3) Now this is the tricky part where I'm stuck. When user click on Room type option it should work like: The price of the selected passenger would be update automatically and then sum of all passenger's price should be show in final price box.
4) Here are the my previous question link:

Show sum of the dynamic price when click on radio button in jquery
Show sum of dynamic radio input element and It should also show when click on another radio input element

5) 见下图：

Answer 1

您需要添加表单标签（使用它更容易处理输入字段）。请注意 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>

如有必要，请更正代码。希望对你有所帮助。

Answer 2

此代码可能会有帮助...我已添加 data-target 属性以使用 ID 定位特定价格。

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>

如何在使用 jQuery 在特定结果 div 中单击它后显示所有动态无线电输入值的总和？

How do I show the sum of all dynamic radio input values after I click on it in a specific result div by using jQuery?

html

javascript

php

jquery

codeigniter-3