Show sum of the dynamic price when click on radio button in jquery

问题

I'm in very bad situation with a project which is related to a travelling website. I'm unable to figure out that how do I calculate the total amount of each passenger's preferred room type.

I've two passenger's records in database.
1) Maggie
2) Esther

The default price for each passenger's is 125000 and when if user click to choose his own room type then price is 150000 for the selected passenger. Here is the website on which I applying this : Website Tailor Page

It is easy to do when the number of travelers is static but all the data come from the database. So below in the code I mention the static version of the form.

Here are the complete code, Please help me because I'm unable to figure it out the issue:

$(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>

来源：https://stackoverflow.com/questions/58048852/show-sum-of-the-dynamic-price-when-click-on-radio-button-in-jquery

标签

javascript

jquery

html

radio-button

codeigniter-3