Как совместить выбранную цену и входной флажок цена Jquery?

Question

У меня есть форма оформления заказа. где используются 2 поля, чтобы указать общую сумму оформления заказа. 1 поле находится в теге выбора, а второе - это флажок типа ввода, который я хочу, когда я выбираю, и параметр и флажок, где значения должны быть объединены, чтобы дать итоговое значение.

$(function() {
  $('.price-input').change(function() {
    var price = 0;
    $('.price-input').each(function() {
      if ($(this).is(":checked")) {
        price += parseInt($(this).attr("value"), 10);
      }
    })
    $("select.price").change(function() {
      var selectedPrice = $(this).children("option:selected").val();
      document.getElementById("totalPrice").innerHTML = selectedPrice;
    });
    $(".totalPrice").text(price);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <label for="exampleFormControlSelect1">@lang('Number of Words'):</label>
    <select class="price" name="word_prices_id" required>
      <option value="">@lang('Select Words')</option>
      @foreach($wordPrice as $wPrice)
      <option value="{{$wPrice->id}}">{{$wPrice->page_quantity}} words</option>
      @endforeach
    </select>
  </div>
</div>
<input class="price-input" type="checkbox" name="upsell" value="12">

Answer 1

Я добавил класс .ajx для выбора и ввода для обработки изменений, внесенных в оба их значения в одной и той же функции!

$(document).on('change', '.ajx', function () {
    if ($( "input.price-input:checked" ).is(":checked") && $("select.price").val()!==''){
    var price = 0;
    price += parseInt($("select.price").val(),10);
$('.price-input').each(function() {
  if ($(this).is(":checked")) {
    price += parseInt($(this).attr("value"), 10);
  }
});
    $(".totalPrice").empty().text(price);
    }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Price:</label>
    <select class="price ajx" name="word_prices_id" required id="exampleFormControlSelect1">
      <option value="">Choose Price</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
  </div>
</div>


<input class="price-input ajx" type="checkbox" name="upsell" value="12">
<input class="price-input ajx" type="checkbox" name="upsell1" value="15">
<div class="totalPrice">
</div>