JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="POST">
    <input type="text" name="text1" id="text1" class="sum" /><br />
    <input type="text" name="text2" id="text2" class="sum" /> <br />
 
    <input type="checkbox" id="chk1" value="4" class="sum" /><label for="chk1">-4%</label> <br />
    <input type="checkbox" id="chk2" value="10" class="sum" /><label for="chk2">-10%</label> <br />
    <select name="u1"  id="options">
            <option value="0" selected="selected">нет</option>
    <option value="120" >1 упаковка</option>
    <option value="240" >2 упаковки</option>
     <option value="300" >3 упаковки</option>
</select>
    <input type="text" name="text" id="text">  
</form>

JavaScript

$(function() {
    var calc = function() {
          var sum = 0;
          fields.each(function() {
              var el = $(this),
                  type = el.attr("type");
 
              if ((type == "text")) {
                  sum += parseInt($(this).val(), 10) || 0;
              }
 if ((type == "checkbox" && el.attr("checked"))) {
                  sum -= (sum *= parseInt($(this).val(), 10)/100) || 0;
              }
              $('#text').val(sum);
 
          });//end each
        },//end calc
 
        fields = $(".sum");
 
    fields.change(calc);
 
});