显示动态单选输入元素的总和，并在单击另一个单选输入元素时也应显示答案

【问题标题】：Show sum of dynamic radio input element and It should also show when click on another radio input element显示动态单选输入元素的总和，并在单击另一个单选输入元素时也应显示
【发布时间】：2023-03-30 18:45:01
【问题描述】：

我正在开展一个项目，当旅行者选择额外房间选项时，我想相应地显示总价。

当旅行者的数量是静态的但所有的数据来自数据库。所以在下面的代码中我提到了表单的静态版本。

这是完整的代码，请帮助我，因为我无法解决问题：

$(document).ready(function(){

    
              $('#extraRoomInput_m1').click(function(){
          $('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
        });
        $('#extraRoomInput_f1').click(function(){
          $('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
        });

        var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val();

        var res = parseInt(extraRoom1);
        res = res+parseInt(extraRoom1);

              $('#extraRoomInput_m2').click(function(){
          $('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
        });
        $('#extraRoomInput_f2').click(function(){
          $('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
        });

        var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val();

        var res = parseInt(extraRoom2);
        res = res+parseInt(extraRoom2);

            // alert(res);
      $('#total_price').html(res);
      
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid mt-4" id="p-1">
  <h3 class="mb-1">
    <i class="fa fa-bed fa-fw"></i>
    Maggie's room type
  </h3>
  <p>Maggie would you like your own room?</p>

  <div class="row mb-5">
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000">
            <p><b>Yes please</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 150000.00  (per person)</p>
            <p>You will have your own room</p>
          </div>
        </div>
      </label>
    </div>
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked="">
            <p><b>No thanks</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
            <p>You will share a room with another traveller of the same gender</p>
          </div>
        </div>
      </label>
    </div>
  </div>

  <h3 class="mb-1">
    <i class="fa fa-bed fa-fw"></i>
    Esther's room type
  </h3>
  <p>Esther would you like your own room?</p>

  <div class="row mb-5">
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000">
            <p><b>Yes please</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 150000.00  (per person)</p>
            <p>You will have your own room</p>
          </div>
        </div>
      </label>
    </div>
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked="">
            <p><b>No thanks</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
            <p>You will share a room with another traveller of the same gender</p>
          </div>
        </div>
      </label>
    </div>
  </div>

 </div>


<div class="card">
  <a class="card-link" data-toggle="collapse" href="#tripInformation">
    <div class="card-header text-dark fs-20">
      Classic Golden Triangle (CGT)
    </div>
  </a>

  <div id="tripInformation" class="collapse show" data-parent="#tripAccordation">
    <div class="card-body p-0">
      <ul class="list-group border-0">
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div>
            <div class="col-md-8">6 Nights/7 Days</div>
          </div>
        </li>
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div>
            <div class="col-md-8">NEW DELHI, DELHI</div>
          </div>
        </li>
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div>
            <div class="col-md-8">NEW DELHI, DELHI</div>
          </div>
        </li>

        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div>
            <div class="col-md-8">
               <p>
                  <i class="fa fa-fw fa-male"></i>                                     Maggie Clarke Schwartz
               </p>
               <p>
                  <i class="fa fa-fw fa-female"></i>                                     Esther Ball Clayton
               </p>
           </div>
          </div>
        </li>
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div>
            <div class="col-md-8 text-right">
              <span class="font-weight-bold">
                <i class="fa fa-inr"></i> Price (per person)
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
                                                <div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div>
                                                <div id="passanger-2">
                  <div class="row px-2 mt-2">
                    <div class="col-md-6">
                      Esther (Twin Room)
                    </div>
                    <div class="col-md-6 text-right">
                      INR <i class="fa fa-inr pl-1"></i>
                      <span id="priceTwinRoom">
                        125000.00                                        </span>
                    </div>
                  </div>
                </div>
                                            </div>
          </div>
        </li>

        <li class="list-group-item active border-0 px-2 fs-20">
          <div class="row">
            <div class="col-md-4 font-weight-bold">
              <i class="fa fa-fw fa-inr"></i> Price
            </div>
            <div class="col-md-8 text-right">
              <i class="fa fa-inr"></i>
              <span id="total_price">300000</span>
               (per person)
             </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【问题讨论】：

标签： javascript php jquery html bootstrap-4

【解决方案1】：

我没有查看所有代码，但您似乎正在为按钮设置事件处理程序。这是一个异步操作，将在按下按钮时触发。但是，您的总价格不希望事件触发，因此不会受到影响。您需要将总价计算放在事件的回调函数中。这是一个常见的 Javascript 错误，因为异步性质很难理解。网上有很多材料可以解释这一点 - 确保你理解这些概念，不要试图剪切和粘贴代码

在第二个 res 计算中，您将覆盖为额外 room1 计算的 res 值，而不是将这些值相加。为了更清楚起见，将第一个 res 称为 extraRoom1Total 和第二个 extraRoom2Total，然后将它们加在一起。这将使代码更易于理解，因此更易于调试和维护

【讨论】：