使用 jQuery 在特定结果 div 中单击它后，如何显示所有动态单选输入值的总和？
这是我在这个编码器社区中的最后一篇文章，因为我在很多方面都提出了这个问题，但没有得到正确的解决方案。所以我简化了我的代码并再次粘贴到这里。我在 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>
如果您不想知道我的网站是如何运作的，请忽略这一点。
让我先解释一下我的网站应该如何运作：
1) 当用户来到我的网站并点击游览，然后在预订表格中填写他的基本个人信息。
2) 之后，所有信息将被保存到数据库中，然后在第一步之后出现量身定制的旅行页面。
3）现在这是我卡住的棘手部分。当用户点击房间类型选项时，它应该像这样工作：所选乘客的价格将自动更新，然后所有乘客价格的总和应显示在最终价格框中。
BIG阳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> -
Smart猫小萌
您需要添加表单标签（使用它更容易处理输入字段）。请注意，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>
随时随地看视频慕课网APP
PHP