在使用 jQuery 在特定結果 div 中單擊它后，如何顯示所有動態無線電輸入值的總和？

Question

這是我在這個編碼器社區中的最后一篇文章，因為我在很多方面都提出了這個問題，但沒有得到正確的解決方案。 所以我簡化了我的代碼並再次粘貼到這里。 我在 jquery/js 方面不太好，所以這就是我堅持使用這段代碼的原因。

請幫助我，這對我很有幫助，因為這是我的第一個項目，我剛從銀行業轉到編程世界。 提前感謝您的所有努力和幫助。

以下是我提到 html 部分的 static 版本的代碼（它是動態來自數據庫的）。

 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

您需要添加表單標簽（使用它更容易處理輸入字段）。 請注意 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>