<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;
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.