j0hnik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.chekBlock {
position: relative;
display: block;
float: right;
width: 20%;
padding: 1%;
border: 1px solid rgba(71,71,71,1.00);
-webkit-box-shadow: 4px 5px 6px rgba(71,71,71,1.00);
box-shadow: 4px 5px 6px rgba(71,71,71,1.00);
background-color: rgba(255,140,0,.2);
}
.chekCont {
position: relative;
display: block;
}
.chekTitle{
margin-bottom: 16px;
padding: 1%;
text-align: center;
color: rgba(134,68,38,1.00);
font: 20px "BebasBold";
}
.chekItemLine {
display: inline-block;
clear: both;
width: 100%;
color: rgba(120,120,120,1.00);
border-bottom-width: 1px;
border-bottom-style: dotted;
}
.lineItem {
color: rgba(134,68,38,.90);
display: inline-block;
float: left;
font-size: 18px;
}
.lineItem2 {
color: rgba(134,68,38,1.00);
display: inline-block;
float: left;
font-size: 22px;
}
.linePrice {
float: right;
}
.lineItem .fa{
font-size: 16px;
}
.linePrice2 {
float: right;
font-size: 22px;
color: rgba(100,100,100,1.00);
}
.linePrice2 .fa{
font-size: 20px;
}
.chekSmall {
display: inline-block;
font-size: 12px;
margin-top: 8px;
border-bottom: 1px dotted rgba(134,68,38,1.00);
}
.chekSmall .fa{
margin-right: 5px;
}
.chekSmall a:hover, .lineItem a:hover{
color: rgba(200,50,00,1.00);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
<script>
$(function() {
var chec = $(".lineItem :checkbox"),
price = 0;
function count(el, from, to) {
$(el).countTo({
from: from,
to: to,
speed: 1E3,
refreshInterval: 50,
formatter: function(value, options) {
return value.toFixed(0)
}
})
}
function costCalculator() {
var sum = 0;
var self = this;
chec.each(function(indx, elem) {
var el = $(elem).parents(".chekItemLine").find(".linePrice span");
var from = elem.checked ? 0 : +elem.value;
var to = elem.checked ? +elem.value : 0;
sum += to;
elem == self && count(el, from, to)
});
count("#result", price, sum);
price = sum
}
chec.on("change",costCalculator)
});
</script>
</head>
<body>
<div class="chekBlock">
<div class="chekCont">
<div class="chekTitle">Стоимость комплекта</div><br>
<div class="chekItemLine">
<div class ="lineItem">
<input type="checkbox" form="form" id="pol" value="4000" name="Полотно:" checked="checked"/><label for="pol"><span></span></label>Полотно</div>
<div class="linePrice"><span id="polRezult">4000</span> <i class="fa fa-rub" aria-hidden="true"></i>
</div>
</div>
<div class="chekItemLine">
<div class ="lineItem">
<input type="checkbox" form="form" id="kor" value="950" name="Коробка" checked/><label for="kor"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Коробка <i class="fa fa-info" aria-hidden="true"></i><span>Дверная коробка: </span></a></div>
<div class="linePrice"><span id="korRezult">950</span> <i class="fa fa-rub" aria-hidden="true"></i></div>
</div>
<div class="chekItemLine">
<div class ="lineItem">
<input type="checkbox" form="form" id="nal" value="990" name="Наличник" checked/><label for="nal"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Наличник <i class="fa fa-info" aria-hidden="true"></i><span>Дверной наличник</span></a></div><div class="linePrice"><span id="nalRezult">990</span> <i class="fa fa-rub" aria-hidden="true"></i>
</div>
</div>
<div class="chekItemLine">
<div class ="lineItem">
<input type="checkbox" form="form" id="dob" value="750" name="Добор" checked/><label for="dob"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Добор <i class="fa fa-info" aria-hidden="true"></i><span>Дверной добор комплект </span></a></div><div class="linePrice"><span id="dobRezult">750</span> <i class="fa fa-rub" aria-hidden="true"></i>
</div>
</div>
<div class="chekItemLine">
<div class ="lineItem">
<input type="checkbox" form="form" id="fur" value="780" name="Фурнитура" checked/><label for="fur"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Фурнитура <i class="fa fa-info" aria-hidden="true"></i><span>В комплкт входит </span></a></div><div class="linePrice"><span id="furRezult">780</span> <i class="fa fa-rub" aria-hidden="true"></i>
</div>
</div>
<div class="chekItemLine">
<div class ="lineItem2">Итого:</div>
<div class="linePrice2"><span id="result">7470</span> <i class="fa fa-rub" aria-hidden="true"></i></div>
</div>
<div class="blockButt"><a href="#form" class="zakazButtBig">Заказать</a></div>
</div>
</div>
</body>
</html>
