JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="checkbox">
  <label>
    <input type="checkbox" name="checkbox" id="outside" class="sum" value="1.25" data-toggle="checkbox"> Outside Wash</label>
</div>
<br/>
<div class="checkbox">
  <label>
    <input type="checkbox" name="checkbox" id="aclean" class="sum" value="1.50" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div>
<br/>
<div class="checkbox">
  <label>
    <input type="checkbox" name="checkbox" id="bclean" class="sum" value="3.75" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div>
<br/>
<div class="checkbox">
  <label>
    <input type="checkbox" name="checkbox" id="cclean" class="sum" value="4.99" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.</label>
</div>
<label for="inputSpecial">Special Price</label>
<br/>
<input type="special" class="form-controlv sum" id="inputSpecial" placeholder="Enter Price for Any Additional Services">


<label for="total"><strong>Total Price</strong></label>
<br/>
<input type="text" class="form-control" id="total">

JavaScript

$(document).ready(function() {
  function updateSum() {
    var total = 0;
    $(".sum:checked").each(function() {
      var val = isNaN(parseFloat(this.value)) ? 0 : parseFloat(this.value);
      total += val;
    })
    var addl = isNaN(parseFloat($('#inputSpecial').val())) ? 0 : parseFloat($('#inputSpecial').val());
    $("#total").val(Math.round((total + addl) * 100) / 100);
  }
  // run the update on every checkbox change and on startup
  $("input.sum,#inputSpecial").change(updateSum);
  updateSum();
})