Показать сообщение отдельно
  #3 (permalink)  
Старый 14.05.2023, 11:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

суммирование выбранного
Сергей Ракипов,
если ещё изменить разметку, то код можно будет сократить.

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
</head>
<body>
    <style>
        body {
            font-family: monospace;
            font-size: .8rem;
        }
        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;
        }
        .summa {
            margin: 40px 0px 0px 0px;
            font-size: 1.2rem;
        }
        .number {
            padding: 0px 0px 0px 20px;
        }
        .summa>.container {
            margin-left: 20px;
        }
        .summa>.container input {
            margin-left: 15px;
        }
    </style>
    <body>
        <section>
            <div class="total_all"></div>
            <div class="summa">
                <label class="container">
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
            </div>
            <div class="summa">
                <label class="container">
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
            </div>
            <div class="summa">
                <label class="container">
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
            </div>
            <div class="summa">
                <label class="container">
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </div>
                <div class="number">
                    <label class="container">2 000
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
                </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() {
                let num = 0;
                for (const div of document.querySelectorAll('.summa')) {
                    const checked = div.querySelector('input:first-child').checked;
                    let n = [...div.querySelectorAll('.number :checked')].reduce((n, {
                        previousSibling
                    }) => n + +previousSibling.data.replace(/\s/g, ''), 0)
                    for (const el of div.querySelector(':first-child').childNodes)
                        if (el.nodeType === 3) el.remove()
                    div.querySelector(':first-child').prepend(digits(n));
                    if (checked) num += n
                }
                total.textContent = digits(num);
            })
            let event = new Event("change");
            section.dispatchEvent(event);
        </script>
    </body>
</body>
</html>
Ответить с цитированием