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

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>如果您不想知道我的网站是如何运作的，请忽略这一点。让我先解释一下我的网站应该如何运作：1) 当用户来到我的网站并点击游览，然后在预订表格中填写他的基本个人信息。2) 之后，所有信息将被保存到数据库中，然后在第一步之后出现量身定制的旅行页面。3）现在这是我卡住的棘手部分。当用户点击房间类型选项时，它应该像这样工作：所选乘客的价格将自动更新，然后所有乘客价格的总和应显示在最终价格框中。

Answer 1

此代码可能会有所帮助...我已添加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>

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>