Javascript-форум - Показать сообщение отдельно

Сергей Ракипов · #18 (**permalink**) 19.05.2023, 07:02

Вот я все понимаю как оно работает и знаю из за чего у меня не получается. Но не получается сложить математику.

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: monospace;
            font-size: 1rem;
        }

        main {
            max-width: 720px;
            margin: 0 auto;
        }

        section {
            max-width: 480px;
            margin: 0px auto 0px;
        }

        .total_all {
            margin: 40px 0px 40px 0px;
            font-size: 2rem;
        }

        .sum label {
            display: block;
            width: 150px;
            text-align: right;
        }

        .sum {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0px 0px 0px 0px;
        }

        .all {
            padding: 10px 0px 10px 0px;
        }

        .all .num {}

        .color {
            color: rebeccapurple;
        }

        .podrobnee {
            padding: 0px 0px 0px 20px;
        }

        .razdel {
            padding: 30px 0px 30px 0px;
        }
    </style>
</head>

<body>
    <section class="section">
        <div class="total_all"></div>
        <div class="sum razdel">
            <label class="all color">
                <span class="num"></span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">4 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">4 000</span>
                <input type="checkbox" checked="checked">
            </label>
        </div>

        <div class="sum">

            <label class="all  color">
                <span class="num"></span>
                <input type="checkbox" checked="checked">
            </label>

            <label class="number">
                <span class="num">2 000</span>
                <input type="checkbox" checked="checked">
            </label>

            <div class="sum">
                <label class="all">
                    <span class="num"></span>
                    <input type="checkbox" checked="checked">
                </label>

                <div class="podrobnee">
                    <label class="number">
                        <span class="num">3 000</span>
                        <input type="checkbox" checked="checked">
                    </label>
                    <label class="number">
                        <span class="num">3 000</span>
                        <input type="checkbox" checked="checked">
                    </label>
                </div>
            </div>
        </div>
    </section>
    <script>
        const section = document.querySelector('.section');
        const total = document.querySelector('.total_all');
        const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")


        section.addEventListener('change', function ({
            target
        }) {
            let input = target.closest('input');
            if (input) {
                let all = target.closest('.all input');
                if (all) target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked))
                else if (target.checked) target.closest('.sum').querySelector('.all input').checked = true;
                else target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
            }
            let num = 0;
            for (const div of document.querySelectorAll('.sum')) {
                const checked = div.querySelector('.all input').checked;
                let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
                    let input = label.querySelector('input');
                    let up = +label.querySelector('.num').textContent.replace(/\s/g, '');
                    return input.checked ? n + up : n
                }
                    , 0)
                div.querySelector('.all .num').textContent = digits(n);
                if (checked) num += n
            }
            total.textContent = digits(num);
        })
        let event = new Event("change");
        section.dispatchEvent(event);
    </script>
</body>

</html>

То есть у меня all лишний раз складывает.
Итоговая сумма должна быть 16 000 но получается 22 000 из за того что all лишний раз сложился. И я пробую по разному но у меня не получается правильно сложить.