Калькулятор на jquery если отмечен чекбокс умножить на значение

134

08 декабря 2020, 18:50

уважаемые. Подскажите пожалуйста. Есть небольшой калькулятор, который высчитывает цену из двух полей. После просчета, он сравнивает, какая цена больше и выводит именно ее. Вопрос такой: У нас есть еще дополнительные 3 чекбокса, и если чекбоксы отмечен, то эта цена должна умножится на определенный коэфицент, и вот тут пока не могу понять как это можно реализовать. Буду признателен за подсказку...

$('#maincalc input#sbt').click(function() { 
      var v1 = parseFloat($("#ves").val()); 
      var v2 = parseFloat($('#obem').val()); 
 
      var weight = v1; 
      var discounted = weight; 
 
      if (v1 >= 0 && v1 < 100) 
        discounted = weight * 13; 
      else if (v1 >= 100 && v1 < 300) 
        discounted = weight * 12.8; 
      else if (v1 >= 300 && v1 < 450) 
        discounted = weight * 12.6; 
      else if (v1 >= 450 && v1 < 750) 
        discounted = weight * 12.4; 
      else if (v1 >= 750 && v1 < 1050) 
        discounted = weight * 12.2; 
      else if (v1 >= 1050 && v1 < 1500) 
        discounted = weight * 11.9; 
      else if (v1 >= 1500 && v1 < 3000) 
        discounted = weight * 11.5; 
      else if (v1 >= 3000 && v1 < 5000) 
        discounted = weight * 11.3; 
      else if (v1 >= 5000 && v1 < 10000) 
        discounted = weight * 11; 
 
      var obem = v2; 
      var discounted2 = obem; 
 
      if (v2 >= 0 && v2 < 1) 
        discounted2 = obem * 2100; 
      else if (v2 >= 1 && v2 < 2) 
        discounted2 = obem * 2050; 
      else if (v2 >= 2 && v2 < 3) 
        discounted2 = obem * 2000; 
      else if (v2 >= 3 && v2 < 5) 
        discounted2 = obem * 1980; 
      else if (v2 >= 5 && v2 < 7) 
        discounted2 = obem * 1950; 
      else if (v2 >= 7 && v2 < 10) 
        discounted2 = obem * 1900; 
      else if (v2 >= 10 && v2 < 20) 
        discounted2 = obem * 1880; 
      else if (v2 >= 20 && v2 < 35) 
        discounted2 = obem * 1850; 
      else if (v2 >= 35 && v2 < 60) 
        discounted2 = obem * 1800; 
 
      if (discounted === discounted) { 
 
      } else { 
 
        return 0; 
      } 
      if (discounted2 === discounted2) { 
 
      } else { 
 
        return 0; 
      } 
 
      if (discounted > discounted2) 
        $("#calc_price").html("Стоимость:" + discounted + "руб."); 
      else 
        $("#calc_price").html("Стоимость:" + discounted2 + "руб."); 
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
<form action="" method="post" class="content_element" id="maincalc"> 
  <div style="display: block;"> 
    <div style="margin-bottom:20px;"> 
 
      <div><input id="ves" class="form-control" required style="max-width:350px;" placeholder="Вес (кг)"></div> 
      <div></div> 
 
      <div><input id="obem" value="" class="form-control" style="max-width:350px;" placeholder="Объем (м3)" required></div> 
    </div> 
    <div style="clear:both"></div> 
    <div class="agreement form-group"> 
      <input type="checkbox" name="perevozka1" id="calc_g" class="required"> 
      <label for="calc_g"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            Перевозка негабаритных грузов: если объем или вес одного места превышает 0,5 куб.м/80кг,либо сумма линейных измерений его габаритов превышает 3 метра (+20% к стоимости) 
        </label> 
    </div> 
    <div class="agreement form-group"> 
      <input type="checkbox" name="perevozka2" id="calc_g2" class="required"> 
      <label for="calc_g2"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            Перевозка негабаритных грузов: если объем или вес одного места превышает  3 куб.м/500кг (+30% к стоимости) 
        </label> 
    </div> 
    <div class="agreement form-group"> 
      <input type="checkbox" name="perevozka3" id="calc_t" class="required"> 
      <label for="calc_t"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            Перевозка груза с соблюдением теплового режима(+30% к стоимости) 
        </label> 
    </div> 
 
    <div style="margin-bottom:20px;"> 
      <div><b>Экспедирование груза:</b></div> 
      <div class="agreement form-group"> 
        <input type="checkbox" name="exp1" id="calc_em" class="required"> 
        <label for="calc_em"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            По Москве 
        </label> 
      </div> 
      <div class="agreement form-group"> 
        <input type="checkbox" name="exp2" id="calc_ee" class="required"> 
        <label for="calc_ee"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            По Екатеринбургу 
        </label> 
      </div> 
 
    </div> 
    <div style="margin-bottom:15px;"><input type="button" type="submit" value="Рассчитать стоимость грузоперевозки" id="sbt" class="btn min"></div> 
    <div id="calc_price"></div> 
 
  </div> 
</form>

Answer 1

let $ves = $('#ves'), 
  $obem = $('#obem'), 
  $checkbox = $('input[name^="perevozka"]'), 
  $sbt = $('#sbt'), 
  $calc_price = $('#calc_price'), 
  mainRait = 1000; // какой-то базовый коэффициент 
 
$sbt.on('click', function () { 
  if (!$ves.val() || !$obem.val()) { 
    alert('не заполнены обязательные поля'); 
    return false; 
  } 
   
  let s = mainRait * (parseInt($ves.val()) * parseInt($obem.val())); 
   
  $.each($checkbox, function (idx, el) { 
    if ($(this).attr('data-surcharge') != '0' && $(this).is(':checked')) { 
      s = s + s * (parseInt($(this).attr('data-surcharge')) / 100); 
    } 
  }) 
   
  $calc_price.html(s); 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
<form action="" method="post" class="content_element" id="maincalc"> 
  <div style="display: block;"> 
    <div style="margin-bottom:20px;"> 
 
      <div><input id="ves" class="form-control" required style="max-width:350px;" placeholder="Вес (кг)"></div> 
      <div></div> 
 
      <div><input id="obem" value="" class="form-control" style="max-width:350px;" placeholder="Объем (м3)" required></div> 
    </div> 
    <div style="clear:both"></div> 
    <div class="agreement form-group"> 
      <input type="checkbox" name="perevozka1" id="calc_g" class="required" data-surcharge = "20"> 
      <label for="calc_g"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            Перевозка негабаритных грузов: если объем или вес одного места превышает 0,5 куб.м/80кг,либо сумма линейных измерений его габаритов превышает 3 метра (+20% к стоимости) 
        </label> 
    </div> 
    <div class="agreement form-group"> 
      <input type="checkbox" name="perevozka2" id="calc_g2" class="required" data-surcharge = "30"> 
      <label for="calc_g2"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            Перевозка негабаритных грузов: если объем или вес одного места превышает  3 куб.м/500кг (+30% к стоимости) 
        </label> 
    </div> 
    <div class="agreement form-group"> 
      <input type="checkbox" name="perevozka3" id="calc_t" class="required" data-surcharge = "30"> 
      <label for="calc_t"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            Перевозка груза с соблюдением теплового режима(+30% к стоимости) 
        </label> 
    </div> 
 
    <div style="margin-bottom:20px;"> 
      <div><b>Экспедирование груза:</b></div> 
      <div class="agreement form-group"> 
        <input type="checkbox" name="exp1" id="calc_em" class="required"> 
        <label for="calc_em"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            По Москве 
        </label> 
      </div> 
      <div class="agreement form-group"> 
        <input type="checkbox" name="exp2" id="calc_ee" class="required"> 
        <label for="calc_ee"> 
            <i class="material-icons checked"></i>  
            <i class="material-icons no-checked"></i>  
            По Екатеринбургу 
        </label> 
      </div> 
 
    </div> 
    <div style="margin-bottom:15px;"><input type="button" type="submit" value="Рассчитать стоимость грузоперевозки" id="sbt" class="btn min"></div> 
    <div id="calc_price"></div> 
 
  </div> 
</form>