Всем привет, мучаю калькулятор, есть два куска кода, один предназначен для того чтобы суммировать значения в select
, другой суммировать значения выбранных chackbox
, но столкнулся с проблемой, не могу понять как их объединить чтобы работали вместе, подскажите, пожалуйста.
function GetData() {
var sum = 0;
var s = $('select').change(function() {
s.each(function() {
sum += Number(this.value) || 0;
});
document.getElementById('result_cum').innerHTML = "Примерная стоимость установки: " + sum;
// console.log(sum);
});
}
$("input").click(function() {
$("input:checked").each(function() {
sum += Number($(this).val());
});
conslog.log(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form align-center" id="col_form_name" method="POST" name="ccol_form_name" OnChange='GetData()'>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="newsletter-label font-alt">
Расчет стоимости ГБО
</div>
<div class="section-text align-center mb-70 mb-xs-40">
Узнайте примерную стоимость установки ГБО
</div>
<form action="" class="form contact-form" id="col_form_name" method="POST" name="col_form_name" OnChange='GetData()'>
<div class="clearfix">
<div class="cf-left-col">
<div class="form-group">
<select class="input-md form-control" id="sel">
<option>Выберите количество цилиндров</option>
<option>4 цилиндра</option>
<option>6 цилиндров</option>
<option>8 цилиндров</option>
<option>ГАЗель</option>
</select>
</div>
<div class="form-group">
<select class="input-md form-control" id="sel1">
<option>Выберите оборудование</option>
<!--4 цилиндра-->
<option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
<option value="11700">Digitronic – (Польша)</option>
<option value="7000">Atiker (Турция) – бюджетный комплет оборудования</option>
<option value="12400">BRC- (Италия), Оборудование премиум класса)</option>
<!--end 4 цилиндра-->
<!--6 цилиндра-->
<option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
<option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
<option value="28400">BRC- (Италия), Оборудование премиум класса</option>
<!--8 цилиндра-->
<option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
<option value="33600">BRC- (Италия), Оборудование премиум класса</option>
</select>
</div>
<div class="form-group">
<select class="input-md form-control" id="sel2">
<option>Выберите объем баллона</option>
<option value="11275">Баллон (Метан) 50 л (219*1640) мм</option>
<option value="29055">Баллон (Метан) 100 л( 425*1000) мм</option>
<option value="25876">Баллон (Метан) 90 л (425*940) мм</option>
<option value="4310">Баллон 100 л (400*912)</option>
<option value="4240">Баллон цилиндрический 100 л (399*895)</option>
<option value="4240">Баллон 103 л (356*1110) </option>
<option value="4100">Баллон 105 л (376*1064)</option>
<option value="4360">Баллон 130 л (399*1144) </option>
<option value="4590">Баллон 130 л (400*1165)</option>
<option value="7550">Баллон цилиндрический 200 л (498*1136) </option>
<option value="2070">Баллон цилиндрический 35 л (241*880)</option>
<option value="2520">Баллон цилиндрический 50 л (299*798) </option>
<option value="2460">Баллон цилиндрический 50 л (300*796)</option>
<option value="3240">Баллон цилиндрический 51 л (356*600) </option>
<option value="2770">Баллон цилиндрический 60 л (299*948) </option>
<option value="2630">Баллон цилиндрический 60 л (300*945)</option>
<option value="3070">Баллон цилиндрический 60 л (315*863) </option>
<option value="3000">Баллон цилиндрический 60 л (315*866)</option>
<option value="2840">Баллон цилиндрический 65 л (299*1023) </option>
<option value="4150">Баллон цилиндрический 80 л (356*900) </option>
<option value="3520">Баллон тор внешняя горловина 42 л НЗГА (600*200)</option>
<option value="5900">Баллон тор внешняя горловина 50 л (650*200) </option>
<option value="4100">Баллон тор внешняя горловина 54 л НЗГА (630*220)</option>
<option value="4710">Баллон тор внешняя горловина 60 л (630*250)</option>
<option value="7550">Баллон тор внешняя горловина 62 л (720*210) </option>
<option value="7500">Баллон тор внешняя горловина 74 л (720*230) </option>
<option value="7900">Баллон тор внешняя горловина 81 л (720*250) </option>
<option value="8350">Баллон тор внешняя горловина 98 л НЗГА (720*300)</option>
<option value="3540">Баллон тор внутр. горловина 42 л НЗГА (600*200)</option>
<option value="3990">Баллон тор внутр. горловина 47 л (600*220) </option>
<option value="3730">Баллон тор внутр. горловина 53 л (630*225) </option>
<option value="6620">Баллон тор внутр. горловина 54 л НЗГА (720*180)</option>
<option value="6210">Баллон тор внутр. горловина 55 л (650*225) </option>
<option value="8100">Баллон тор полнотелый 85 л (720*250) </option>
<option value="8300">Баллон тор полнотелый 93 л (720*270) </option>
<option value="8300">Баллон тор полнотелый 94 л (720*270) </option>
</select>
</div>
</div>
<div class="cf-right-col">
<div class="form-group">
<!-- <select multiple class="form-control" id="sel3">
<option value="300">ВЗУ</option>
<option value="1000">Сенсор уровня газа</option>
<option value="1500">Евромультиклапан</option>
<option value="1500">Обтяжка карпетом</option>
<option value="500">Доп фильтр тонкой очистки</option>
</select>-->
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" name="cname" value="300">1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" name="cname" value="300">2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" name="cname" value="300">3
</label>
</div>
<div class="form-tip pt-20">
<i class="fa fa-info-circle"></i> Для множественного выбора зажмите клавишу CTRL
</div>
</div>
<div class="cf-left-col">
</div>
<div class="cf-left-col">
<!-- Пробег -->
<!-- bensin -->
</div>
</div>
<div class="section-text align-center mb-20 mb-xs-40" id="ekonomia">
</div>
<div class="clearfix">
<div class="cf-left-col">
<!-- Inform Tip -->
</div>
</div>
<div class="section-text align-center mb-70 mb-xs-40" id="result_cum">
</div>
</form>
<div id="subscribe-result"></div>
</div>
</div>
</form>
Код нужно чистить и чистить, но вот думаю так для начала вам подойдет, объединяйте пересчет всех данных при изменении.
function GetData() {
let sum = 0;
var s = $('select');
s.each(function() {
sum += Number(this.value) || 0;
});
$("input:checked").each(function() {
sum += Number($(this).val());
});
document.getElementById('result_cum').innerHTML = "Примерная стоимость установки: " + sum;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form align-center" id="col_form_name" method="POST" name="ccol_form_name" onchange='GetData()'>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="newsletter-label font-alt">
Расчет стоимости ГБО
</div>
<div class="section-text align-center mb-70 mb-xs-40">
Узнайте примерную стоимость установки ГБО
</div>
<form action="" class="form contact-form" id="col_form_name" method="POST" name="col_form_name" OnChange='GetData()'>
<div class="clearfix">
<div class="cf-left-col">
<div class="form-group">
<select class="input-md form-control" id="sel">
<option>Выберите количество цилиндров</option>
<option>4 цилиндра</option>
<option>6 цилиндров</option>
<option>8 цилиндров</option>
<option>ГАЗель</option>
</select>
</div>
<div class="form-group">
<select class="input-md form-control" id="sel1">
<option>Выберите оборудование</option>
<!--4 цилиндра-->
<option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
<option value="11700">Digitronic – (Польша)</option>
<option value="7000">Atiker (Турция) – бюджетный комплет оборудования</option>
<option value="12400">BRC- (Италия), Оборудование премиум класса)</option>
<!--end 4 цилиндра-->
<!--6 цилиндра-->
<option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
<option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
<option value="28400">BRC- (Италия), Оборудование премиум класса</option>
<!--8 цилиндра-->
<option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
<option value="33600">BRC- (Италия), Оборудование премиум класса</option>
</select>
</div>
<div class="form-group">
<select class="input-md form-control" id="sel2">
<option>Выберите объем баллона</option>
<option value="11275">Баллон (Метан) 50 л (219*1640) мм</option>
<option value="29055">Баллон (Метан) 100 л( 425*1000) мм</option>
<option value="25876">Баллон (Метан) 90 л (425*940) мм</option>
<option value="4310">Баллон 100 л (400*912)</option>
<option value="4240">Баллон цилиндрический 100 л (399*895)</option>
<option value="4240">Баллон 103 л (356*1110) </option>
<option value="4100">Баллон 105 л (376*1064)</option>
<option value="4360">Баллон 130 л (399*1144) </option>
<option value="4590">Баллон 130 л (400*1165)</option>
<option value="7550">Баллон цилиндрический 200 л (498*1136) </option>
<option value="2070">Баллон цилиндрический 35 л (241*880)</option>
<option value="2520">Баллон цилиндрический 50 л (299*798) </option>
<option value="2460">Баллон цилиндрический 50 л (300*796)</option>
<option value="3240">Баллон цилиндрический 51 л (356*600) </option>
<option value="2770">Баллон цилиндрический 60 л (299*948) </option>
<option value="2630">Баллон цилиндрический 60 л (300*945)</option>
<option value="3070">Баллон цилиндрический 60 л (315*863) </option>
<option value="3000">Баллон цилиндрический 60 л (315*866)</option>
<option value="2840">Баллон цилиндрический 65 л (299*1023) </option>
<option value="4150">Баллон цилиндрический 80 л (356*900) </option>
<option value="3520">Баллон тор внешняя горловина 42 л НЗГА (600*200)</option>
<option value="5900">Баллон тор внешняя горловина 50 л (650*200) </option>
<option value="4100">Баллон тор внешняя горловина 54 л НЗГА (630*220)</option>
<option value="4710">Баллон тор внешняя горловина 60 л (630*250)</option>
<option value="7550">Баллон тор внешняя горловина 62 л (720*210) </option>
<option value="7500">Баллон тор внешняя горловина 74 л (720*230) </option>
<option value="7900">Баллон тор внешняя горловина 81 л (720*250) </option>
<option value="8350">Баллон тор внешняя горловина 98 л НЗГА (720*300)</option>
<option value="3540">Баллон тор внутр. горловина 42 л НЗГА (600*200)</option>
<option value="3990">Баллон тор внутр. горловина 47 л (600*220) </option>
<option value="3730">Баллон тор внутр. горловина 53 л (630*225) </option>
<option value="6620">Баллон тор внутр. горловина 54 л НЗГА (720*180)</option>
<option value="6210">Баллон тор внутр. горловина 55 л (650*225) </option>
<option value="8100">Баллон тор полнотелый 85 л (720*250) </option>
<option value="8300">Баллон тор полнотелый 93 л (720*270) </option>
<option value="8300">Баллон тор полнотелый 94 л (720*270) </option>
</select>
</div>
</div>
<div class="cf-right-col">
<div class="form-group">
<!-- <select multiple class="form-control" id="sel3">
<option value="300">ВЗУ</option>
<option value="1000">Сенсор уровня газа</option>
<option value="1500">Евромультиклапан</option>
<option value="1500">Обтяжка карпетом</option>
<option value="500">Доп фильтр тонкой очистки</option>
</select>-->
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" name="cname" value="300">1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" name="cname" value="300">2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" name="cname" value="300">3
</label>
</div>
<div class="form-tip pt-20">
<i class="fa fa-info-circle"></i> Для множественного выбора зажмите клавишу CTRL
</div>
</div>
<div class="cf-left-col">
</div>
<div class="cf-left-col">
<!-- Пробег -->
<!-- bensin -->
</div>
</div>
<div class="section-text align-center mb-20 mb-xs-40" id="ekonomia">
</div>
<div class="clearfix">
<div class="cf-left-col">
<!-- Inform Tip -->
</div>
</div>
<div class="section-text align-center mb-70 mb-xs-40" id="result_cum">
</div>
</form>
<div id="subscribe-result"></div>
</div>
</div>
</form>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Есть скрипт выпадающего блока, проблема в том, если его открыть, то он закрывается по любому клику (не важно кликните вы по открывшимся блоке...
Пытаюсь разобраться, как передавать данные между siblings-компонентамиИдея такая: нужно сделать так, чтоб класс active был только у одного child-компонента...