<ul class="ub-grid1 grid-line1">
<li class="ub-grid grid-line">
<div class="ub-grid grid-column">
<p class="badge badge-warning">Ширина дома, м</p>
<input type="number" name="quant" class="form-control mtr" id="weight" value="2"/>
<p class="badge badge-warning">Высота стен, м</p>
<select type="select" id="vol" name="quant2" class="form-control mtr"/>
<option value="2">2 м</option>
<option value="2.1">2,1 м</option>
<option value="2.2">2,2 м</option>
<option value="2.3">2,3 м</option>
<option value="2.4">2,4 м</option>
<option value="2.5">2,5 м</option>
<option value="2.6">2,6 м</option>
<option value="2.7">2,7 м</option>
<option value="2.8">2,8 м</option>
<option value="2.9">2,9 м</option>
<option value="3">3 м</option>
<option value="3.1">3,1 м</option>
<option value="3.2">3,2 м</option>
</select>
<p class="badge badge-warning">Тип фундамента</p>
<select type="select" id="voll" name="quant2" class="form-control mtr"/>
<option value="200000">Монолитная лента на глубину промерзания</option>
<option value="300000">Утепленная монолитная плита (УМП)</option>
<option value="50000">Свайно-винтовой</option>
<option value="75000">Буро-забивной</option>
<option value="100000">Свайно-ленточный</option>
</select>
<p class="badge badge-warning">Лестница</p>
<div class="field-radio-group">
<div class="field-body">
<label class="custom-control-label radioo" for="load1"> <input type="radio" id="load1" name="quant11" class="custom-control-input mtr radio" value="0">
<span> Да полноценная</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="del1"> <input type="radio" id="del1" name="quant11" class="mtr custom-control-input radio" value="0" checked="checked"><span>
Нет</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="frag1"> <input type="radio" id="frag1" name="quant11" class="custom-control-input radio"><span>
Черновая</span> </label>
</div>
</div>
</div>
<div class="ub-grid grid-column">
<p class="badge badge-warning">Длина дома, м</p>
<input type="number" name="quant" class="form-control mtr" id="length" value="2"/>
<p class="badge badge-warning">Проживание</p>
<div class="field-radio-group">
<div class="field-body">
<label class="custom-control-label radioo" for="p1"> <input type="radio" id="p1" name="quant31" class="mtr custom-control-input" checked="checked">
<span>Постоянное</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="p2"> <input type="radio" id="p2" name="quant31" class="custom-control-input" >
<span>Сезонное</span> </label>
</div>
</div>
<p class="badge badge-warning">Дополнения</p>
<div class="field-radio-group">
<div class="field-body">
<label class="custom-control-label radioo" for="load" ><input type="radio" id="load" name="quant" class="custom-control-input mtr"/>
<span>Подпол</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="del"><input type="radio" id="del" name="quant" class="mtr custom-control-input"/>
<span>Подвал</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="frag"><input type="radio" id="frag" name="quant" class="custom-control-input" checked="checked"/>
<span>Нет</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="fragg"><input type="radio" id="fragg" name="quant" class="custom-control-input" />
<span>Отмоска</span></label>
</div>
</div>
<p class="badge badge-warning">Этажность дома</p>
<select type="select" id="etazh" name="quant2" class="form-control mtr"/>
<option value="1">Одиноэтажный</option>
<option value="1.5">Двухэтажный (мансардный)</option>
<option value="2">Двухэтажный (полноценный)</option>
<option value="2.5">Трехэтажный (мансардный)</option>
<option value="3">Трехэтажный (полноценный)</option>
</select>
</div>
</li>
<li class="ub-grid grid-line">
<p class="badge badge-warning">Мат. внешних стен</p>
<select type="select" id="steny" name="quant2" class="form-control mtr"/>
<option value="10000">Каркасно-панельное</option>
<option value="17000">Пено-газо блок (400 мм)</option>
<option value="12000">Каркасно-щитовое</option>
<option value="15000">Кирпич (380 мм)</option>
<option value="19000">Трехэтажный (полноценный)</option>
<option value="13000">Брусовое</option>
<option value="14000">Бревенчатое</option>
</select>
</li>
<li class="ub-grid grid-line">
<p class="badge badge-warning">Тип перекрытия</p>
<select type="select" id="perekrytie" name="quant2" class="form-control mtr"/>
<option value="30000">По деревянным балкам</option>
<option value="60000">Сборное из ЖБ плит</option>
<option value="90000">Бетонное монолитное</option>
<option value="100">По двутаврам, LVL-балкам</option>
</select>
</li>
<li class="ub-grid grid-line">
<div class="ub-grid grid-column"><p class="badge badge-warning">Материал кровли</p>
<select type="select" id="krov" name="quant21" class="form-control mtr">
<option value="10000">Металлочерепица</option>
<option value="20000">Мягкая черепица</option>
<option value="30000">Композитная черепица</option>
<option value="40000">Плоская кровля</option>
<option value="50000">Кровельный профнастил</option>
<option value="60000">Цементно-песчаная черепица</option>
<option value="70000">Керамическая черепица</option>
<option value="80000">Металлический сайдинг</option>
</select>
<p class="badge badge-warning">Тип кровли</p>
<select type="select" id="krov2" name="quant21" class="form-control mtr">
<option value="10000">Односкатная</option>
<option value="20000">Двухскатная</option>
<option value="30000">Четырехскатная</option>
<option value="100">Вальмовая</option>
<option value="200">Плоская</option>
</select>
</div>
<div class="ub-grid grid-column"><p class="badge badge-warning">Вставка окон и дверей</p>
<div class="field-radio-group">
<div class="field-body">
<label class="custom-control-label radioo" for="okna"> <input type="radio" id="okna" name="quant3" class="mtr custom-control-input" checked="checked">
<span>Да</span></label>
</div>
<div class="field-body">
<label class="custom-control-label radioo" for="okna2"> <input type="radio" id="okna2" name="quant3" class="custom-control-input">
<span>Нет</span> </label>
</div>
</div>
<p class="badge badge-warning">Дополнительные постройки</p>
<select type="select" id="dop" name="quant221" class="form-control mtr">
<option value="100">Баня, гараж</option>
<option value="200">Балкон, терраса </option>
<option value="300">Веранда, печка</option>
<option value="400">Сарай, хоз. блок</option>
<option value="500">Без построек</option>
</select>
</div>
</li>
<li class="ub-grid grid-line">
<div class="row12">
<div class="half-width" style="display: block"><div class="full-width-el"><p>Итого:</p></div></div>
<div class="row1 col-12 mb-3"><span id="out">0.0</span> <span class="rub">₽ублей</span></div>
</div>
</li>
</ul>
body {
margin: 0 20% 0 20%;
}
li.ub-grid.grid-line {
display: table;
position: relative;
width: 100%;
margin: 10px;
}
.ub-grid.grid-column {
display: table-cell;
position: relative;
vertical-align: top;
min-width: 160px;
width: 50%;
padding: 10px;
}
.grid-column select {
width: 100%;
border-radius: 6px;
font-size: 14px;
padding: 8px 12px;
background: #fff;
border: 2px solid #ffc107;
color: #212121;
}
input#weight, input#length,
select#krov, select#krov2 {
width: 94%;
border-radius: 6px;
font-size: 14px;
padding: 8px 12px;
background: #fff;
border: 2px solid #ffc107;
color: #212121;
}
select#steny, select#perekrytie {
width: 99%;
border-radius: 6px;
font-size: 14px;
padding: 8px 12px;
background: #fff;
border: 2px solid #ffc107;
color: #212121;
}
/* для элемента input c type="radio" */
.radioo>input {
position: absolute;
z-index: -1;
opacity: 0;
}
/* для элемента label связанного с .custom-radio */
.radioo>span {
display: inline-flex;
align-items: center;
user-select: none;
}
/* создание в label псевдоэлемента before со следующими стилями */
.radioo>span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
flex-shrink: 0;
flex-grow: 0;
border: 2px solid #ffc107;
border-radius: 50%;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
/* стили при наведении курсора на радио */
.radioo>input:not(:disabled):not(:checked)+span:hover::before {
border-color: #ffc107;
}
/* стили для активной радиокнопки (при нажатии на неё) */
.radioo>input:not(:disabled):active+span::before {
background-color: #ffc107;
border-color: #ffc107;
}
/* стили для радиокнопки, находящейся в фокусе */
.radioo>input:focus+span::before {
box-shadow: 0 0 0 0.2rem #ffc10799;
}
/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.radioo>input:focus:not(:checked)+span::before {
border-color: #ffc107;
}
/* стили для радиокнопки, находящейся в состоянии checked */
.radioo>input:checked+span::before {
border-color: #ffc107;
background-color: #ffc107;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* стили для радиокнопки, находящейся в состоянии disabled */
.radioo>input:disabled+span::before {
background-color: #ffc107;
}
.row12 {
background: #ffc107;
margin-top: 10px;
padding: 20px;
width: 96%;
text-align: right;
}
.row1.col-12.mb-3 {
color: #212121;
font-size: 21px;
font-weight: 700;
}
.field-radio-group {
margin-bottom: -8px;
}
p.badge.badge-warning {
color: #212121;
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
font-family: PTSans-Regular,sans-serif;
padding: 10px;
}
$( document ).ready(function() {
var btn = document.querySelector('#btn'),
out = document.querySelector('#out'),
weight =document.querySelector('#weight'),
vol = document.querySelector('#vol'),
voll = document.querySelector('#voll'),
perekrytie = document.querySelector('#perekrytie'),
etazh = document.querySelector('#etazh'),
steny = document.querySelector('#steny'),
krov = document.querySelector('#krov'),
krov2 = document.querySelector('#krov2'),
dop = document.querySelector('#dop'),
length = document.querySelector('#length')
load = document.querySelector('#load'),
del = document.querySelector('#del'),
frag = document.querySelector('#frag'),
range = document.querySelector('#range'),
weight = document.querySelector('#weight'),
length = document.querySelector('#length'),
voll = document.querySelector('#voll'),
perekrytie = document.querySelector('#perekrytie'),
etazh = document.querySelector('#etazh'),
steny = document.querySelector('#steny'),
krov = document.querySelector('#krov'),
krov2 = document.querySelector('#krov2'),
dop = document.querySelector('#dop'),
vol = document.querySelector('#vol'),
kg = 5.5,
kub = 3500,
km = 2;
$('.minpl,.custom-control-input,.custom-range,.form-control,.form-control').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 (load.checked){
load.value = 10000; }
else
{
load.value = 0;
}
if (del.checked){
del.value = -70000; }
else
{
del.value = 0;
}
if (frag.checked){
frag.value = 300; }
else
{
frag.value = 0;
}
if (fragg.checked){
fragg.value = 400; }
else
{
fragg.value = 0;
}
if (load1.checked){
load1.value = 50000; }
else
{
load1.value = 0;
}
if (del1.checked){
del1.value = 0; }
else
{
del1.value = 0;
}
if (frag1.checked){
frag1.value = 300; }
else
{
frag1.value = 0;
}
if (p1.checked){
p1.value = 10000; }
else
{
p1.value = 0;
}
if (p2.checked){
p2.value = -70000; }
else
{
p2.value = 0;
}
if (okna.checked){
okna.value = 50000; }
else
{
okna.value = 0;
}
if (okna2.checked){
okna2.value = 0; }
else
{
okna2.value = 0;
}
var sum = ((((Number(weight.value) * Number(length.value))+(((2 * Number(weight.value))+(2 * Number(length.value))) * Number(vol.value))) * Number(steny.value)) *
Number(etazh.value)) +
Number(voll.value) +
Number(perekrytie.value) +
Number(load.value) + Number(del.value) + Number(frag.value) + Number(fragg.value) +
Number(load1.value) + Number(del1.value) + Number(frag1.value) + Number(p1.value) + Number(p2.value) +
Number(krov.value) +
Number(krov2.value) + Number(okna.value) + Number(okna2.value) +
Number(dop.value);
out.innerHTML = sum;
}
}
});
This Pen doesn't use any external CSS resources.