Как создать функцию, которая срабатывает при втором клике на checkbox?

Question

[Тимофей Шариков]

Имеется код:

<div class="calculator-card">
    <input type="checkbox" id="added-service-calc" value="люстра" class="calculator-card__checkbox">
    <p>Снятие/установка люстры</p>
    <input type="number" id="lustra-calc__quanity" class="calculator-card__input-number">
    <p>шт.</p>
</div>

Мне нужно, чтобы при нажатии на checkbox в input с классом calculator-card__input-number появлялась цифра один.
Это я сделал, но также мне нужно, чтобы когда checkbox уберут, цифра пропадала. Как это сделать через js?

Comments

[ProjectSoft]

Тимофей Шариков Вы бы хотя бы свой код JS показали.
Хорошо, что хоть html есть))), чтобы привязаться.

let check = document.getElementById('added-service-calc'),
    inp = document.getElementById('lustra-calc__quanity');
inp.addEventListener('input', function(e){
  let val = parseInt(this.value);
  (val > 0) ? (
    this.value = val,
    check.checked = true
  ) : (
    this.value = 0,
    check.checked = false
  )
});
check.addEventListener('input', function(e){
  inp.value = this.checked ? 1 : 0;
})

[Тимофей Шариков]

ProjectSoft, спасибо! Помогли)

[Тимофей Шариков]

ProjectSoft,

<label for="added-service-calc" class="label__disNone"></label>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="люстра"
                                                    class="calculator-card__checkbox">
                                                <p>Снятие/установка люстры</p>
                                                <input type="number" id="lustra-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <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">
                                                <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">
                                                <p>м.п.</p>
                                            </div>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="брус"
                                                    class="calculator-card__checkbox">
                                                <p>Установка бруса</p>
                                                <input type="number" id="brus-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <p>м.п.</p>
                                            </div>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="угол"
                                                    class="calculator-card__checkbox">
                                                <p>Дополнительный угол</p>
                                                <input type="number" id="ugol-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <p>м.п.</p>
                                            </div>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="кривой_участок"
                                                    class="calculator-card__checkbox">
                                                <p>Криволинейный участок</p>
                                                <input type="number" id="criv-uchastock-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <p>м.п.</p>
                                            </div>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="поверхность"
                                                    class="calculator-card__checkbox">
                                                <p>Монтаж на сложную поверхность</p>
                                                <input type="number" id="poverhnost-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <p>м.п.</p>
                                            </div>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="проводка"
                                                    class="calculator-card__checkbox">
                                                <p>Монтаж электропроводки</p>
                                                <input type="number" id="provodka-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <p>точка</p>
                                            </div>
                                            <div class="calculator-card">
                                                <input type="checkbox" id="added-service-calc" value="труба"
                                                    class="calculator-card__checkbox">
                                                <p>Обход трубы с окантовкой</p>
                                                <input type="number" id="truba-calc__quanity"
                                                    class="calculator-card__input-number">
                                                <p>шт.</p>
                                            </div>

Извините, немного затрудняюсь, в случае с таким кодом, как можно оптимизировать ваш скрипт?

Answer 1

[ProjectSoft]

Тимофей Шариков, запомните одно правило раз и навсегда - id ресурса может быть только одно на весь документ.

Answer 2

[pinkhead_psd]

Если я правильно понял суть, то нужен обычный туглер. Можно таким вариантом сделать:

const checkbox = document.querySelector('#added-service-calc');
        const number = document.querySelector('.calculator-card__input-number');
        let count = 0;
        checkbox.addEventListener('click', (e) => {
            if (e.target.classList.contains('checked')) {
                number.value = '';
                e.target.classList.remove('checked');
                e.target.classList.add('unchecked');
            } else {
                number.value = '1';
                e.target.classList.remove('unchecked');
                e.target.classList.add('checked');
            }
        })

Либо посмотри toogle - https://developer.mozilla.org/en-US/docs/Web/API/D...