Показать сообщение отдельно
  #14 (permalink)  
Старый 16.05.2023, 13:43
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Не получается у меня сложить конечный результат.

<!DOCTYPE HTML>
<html>

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

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

        .calculation {
            max-width: 480px;
            margin: 0px auto 0px;
            display: flex;
            flex-direction: column;
        }

        .total_all {
            margin: 10px auto;
            font-size: 2rem;
        }

        .sum label {
            display: block;
            text-align: right;
            margin: 0 auto;
        }

        .sum {
            font-size: 1.2rem;
            display: flex;
            flex-direction: column;
            margin: 5px auto;

        }

        .all .num {
            color: red;
        }
        .details{
            font-size: .8;
            color: grey;
        }
    </style>
</head>

<body>
    <section class="calculation">
        <p>С прошлой встречи 10 000</p>
        <p>Приход</p>
        <div class="total_all">

        </div>
        <p>Итого</p>
        <div class="total_minus">
            22 000
        </div>
        <div class="sum">
            <label class="all">
                <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>
            <label class="number">
                <span class="num">2 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
        </div>
        <div class="sum">
            <label class="all">
                <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>
            <label class="number">
                <span class="num">2 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
        </div>
    </section>
    <section class="calculation">
        <p>Итого 22 000</p>
        <p>Расходы</p>
        <div class="total_all">

        </div>
        <div class="total">

        </div>
        Остаток после расходов
        <div class="total_plus">
        14 000
        </div>
        <div class="sum">
            <label class="all">
                <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>
            <div class="details">
                Проезд
                <label class="number">
                    <span class="num">2 000</span>
                    <input type="checkbox" checked="checked">
                </label>
                Проживание
                <label class="number">
                    <span class="num">2 000</span>
                    <input type="checkbox" checked="checked">
                </label>
            </div>
   
        </div>
        <div class="sum">
            <label class="all">
                <span class="num"></span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
            <label class="number">
                <span class="num">1 000</span>
                <input type="checkbox" checked="checked">
            </label>
        </div>
    </section>
    <script>
        const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
        for (const section of document.querySelectorAll('.calculation')) {
            const total = section.querySelector('.total_all');

            section.addEventListener('change', function ({

                target

            }) {

                console.log("target", target);
                let input = target.closest('input');
                console.log("input", input);

                if (input) {

                    let all = target.closest('.all input');

                    console.log("all", all);

                    if (all) { 
                        let sum = target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked)); 
                        console.log("sum1", sum)
                    }

                    else if (target.checked) {
                        let sum = target.closest('.sum').querySelector('.all input').checked = true
                        console.log("sum2", sum)
                    }

                    else {
                        let sum = target.closest('.sum').querySelector('.all input')
                        target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
                        console.log("sum3", sum)
                    }

                }

                let num = 0;
                console.log("section", section);

                for (const div of section.querySelectorAll('.sum')) {

                    const checked = div.querySelector('.all input').checked;
                    let n = [...div.querySelectorAll('.number')].reduce((n, label) => {

                        let input = label.querySelector('input');

                        let up = Number(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>


Вот первый блок section он отображает ПРИХОД и если я нажимаю галочки то и в блоке total_minus происходят изменения то есть убираю 2 000 то в total_minus становится 20 000

А во втором блоке тоже самое только если я убираю расходы то в блоке total_plus происходит измение к примеру я убираю галочку 1 000 то и в total_plus становится 15 000

И еще пункт который расписывает так же галочками более подробно то есть командировочные 4 000 в них входит 2 000 проезд и 2 000 проживание измение на галочках так же меняет все цифры.
Ответить с цитированием