<form class="row1">
<div class="row mb-3">
<div class="form-group col-md-6 col-sm-6">
<p class="badge badge-warning">Вес (кг)</p>
<input type="text" name="quant" class="form-control mtr" id="weight" data-step="1" value="1" data-price="15" data-min="10"/>
<span class="plus minpl">+</span>
<span class="minus minpl">-</span>
</div>
<div class="form-group col-md-6 col-sm-6">
<p class="badge badge-warning">Объем (куб²)</p>
<input type="text" name="quant" id="vol" value="1" class="form-control mtr" data-step="1" data-price="20" data-min="1"/>
<span class="plus minpl">+</span>
<span class="minus minpl">-</span>
</div>
</div>
<div class="custom-control custom-checkbox row d-flex justify-content-center mb-3">
<div class="col-md-3" style="visibility: visible;">
<input type="checkbox" id="load" name="quant" class="custom-control-input mtr"/>
<label class="custom-control-label" for="load" >Нужна погрузка</label>
</div>
<div class="col-md-3" style="visibility: visible;">
<input type="checkbox" id="del" name="quant" class="mtr custom-control-input"/>
<label class="custom-control-label" for="del">Доставка до места</label>
</div>
<div class="col-md-3" style="visibility: visible;">
<input type="checkbox" id="frag" name="quant" class="custom-control-input"/>
<label class="custom-control-label" for="frag">Хрупкий груз</label>
</div>
</div>
<div class="row mb-3">
<div class="form-group col-md-12">
<label for="range">Расстояние <span class="rasstoyanie">0</span> <span>км</span></label>
<input type="range" class="custom-range" min="50" max="5000" step="50" id="range" value="500" name="quant" value=""/>
</div>
</div>
<div class="row col-12 mb-3"><span id="out">0.0</span> <span class="rub">₽</span></div>
<div class="row">
<div class="col-md-2 col-12">
<input type="button" name="adress" id="btn" class="btn-block btn btn-primary" value="Считать"/>
</div>
</div>
</form>
var btn = document.querySelector('#btn'),
out = document.querySelector('#out'),
weight = document.querySelector('#weight'),
vol = document.querySelector('#vol'),
load = document.querySelector('#load'),
del = document.querySelector('#del'),
frag = document.querySelector('#frag'),
range = document.querySelector('#range'),
rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = 500;
weight = document.querySelector('#weight'),
vol = document.querySelector('#vol'),
kg = 5.5,
kub = 3500,
km = 2;
// range slider
range.onchange = function(){
var rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = range.value;
}
// Basic function
$('.minpl,.custom-control-input,.custom-range').click(function() {
/*Находим input*/
$input = $(this).parent().find('.mtr');
var qty = Number($input.val());
/*Передаем функции подсчета, обновления*/
if (isNaN(qty)) qty = 0;
if ($(this).hasClass('plus')) {
if (qty == 0) {
qty = $input.data('min');
} else {
qty += $input.data('step');
}
} else {
qty -= $input.data('step');
}
var min = $input.data('min');
if (qty >= min) {
$input.val(qty).trigger('input');
} else {
$input.val(0).trigger('input');
}
updateCalc($input);
});
function updateCalc($input) {
if (weight.value != '' && vol.value != '') {
if (load.checked){
load.value = 1500; }
else
{
load.value = 0;
}
if (del.checked){
del.value = 3500; }
else
{
del.value = 0;
}
if (frag.checked){
frag.value = 2000; }
else
{
frag.value = 0;
}
var sum = (weight.value * kg) + (vol.value * kub) + Number(load.value) + + Number(del.value) + Number(frag.value) + (range.value * km);
out.innerHTML = sum;
}else{
alert('Введите вес и объем груза');
}
}
This Pen doesn't use any external CSS resources.