<label for="added-service-calc" class="label__disNone"></label>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-lustra" value="люстра"
class="calculator-card__checkbox">
<p>Снятие/установка люстры</p>
<input type="number" id="lustra-calc__quanity" class="calculator-card__input-number" value="0">
<p>шт.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-carniz" value="карниз" class="calculator-card__checkbox">
<p>Установка карниза</p>
<input type="number" id="carniz-calc__quanity" class="calculator-card__input-number" value="0">
<p>м.п.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-demontazh" value="демонтаж" class="calculator-card__checkbox">
<p>Демонтаж старого полотна</p>
<input type="number" id="demontazh-calc__quanity" class="calculator-card__input-number" value="0">
<p>м.п.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-brus" value="брус" class="calculator-card__checkbox">
<p>Установка бруса</p>
<input type="number" id="brus-calc__quanity" class="calculator-card__input-number" value="0">
<p>м.п.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-ugol" value="угол" class="calculator-card__checkbox">
<p>Дополнительный угол</p>
<input type="number" id="ugol-calc__quanity" class="calculator-card__input-number" value="0">
<p>м.п.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-criv" value="кривой_участок" class="calculator-card__checkbox">
<p>Криволинейный участок</p>
<input type="number" id="criv-uchastock-calc__quanity" class="calculator-card__input-number" value="0">
<p>м.п.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-poverhnost" value="поверхность" class="calculator-card__checkbox">
<p>Монтаж на сложную поверхность</p>
<input type="number" id="poverhnost-calc__quanity" class="calculator-card__input-number" value="0">
<p>м.п.</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-provodka" value="проводка" class="calculator-card__checkbox">
<p>Монтаж электропроводки</p>
<input type="number" id="provodka-calc__quanity" class="calculator-card__input-number" value="0">
<p>точка</p>
</div>
<div class="calculator-card">
<input type="checkbox" id="added-service-calc-truba" value="труба" class="calculator-card__checkbox">
<p>Обход трубы с окантовкой</p>
<input type="number" id="truba-calc__quanity" class="calculator-card__input-number" value="0">
<p>шт.</p>
</div>
/**
* Делегирование события.
* Слушаем событие input у документа
* e.target - элемент, который послал событие
* Ищем родитель элемента.
* Если найден родитель ищем второй инпут в зависимости от типа первого элемента.
* Если найден второй элемент выставляем нужные значения в зависимости от типа первого элемента.
**/
document.addEventListener('input', function(e){
let inp = e.target,
parent = inp.closest('.calculator-card'),
type = inp.type,
box;
/**
* Если найден родитель
**/
if(parent){
/**
* Проверяем тип основного элемента.
* Если это checkbox - одно действие
* Если это number - другое действие
**/
switch(type){
case 'checkbox':
box = parent.querySelector('[type="number"]');
/**
* Если найден <input type="number">
**/
if(box) {
box.value = inp.checked ? 1 : 0;
}
break;
case 'number':
box = parent.querySelector('[type="checkbox"]');
/**
* Если найден <input type="checkbox">
**/
if(box) {
let val = parseInt(inp.value);
/**
* Если value больше нуля, то переводим checkbox в активное состояние,
* если нет, то в противоположное состояние.
* Устанавливаем значение value у входного <input type="number">
**/
(val > 0) ? (
inp.value = val,
box.checked = true
) : (
inp.value = 0,
box.checked = false
);
}
break;
}
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.