CheckBox + калькулятор

Question

CheckBox + калькулятор

Рейтинг: 0Ответов: 2Опубликовано: 10.12.2014

Доброго времени суток.

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

Задача: Есть два блока. Надо в каждом из них чекбоксы объединить в группу и дать им одну цену. Грубо говоря, блок - это пакет услуг. Человек в этом блоке выбирает 1,2 или 3 пункта (чекбокса), но платит все равно одну сумму. То же самое и со вторым блоком. А потом уже эти блоки суммируются. Но есть уточнение, что будут блоки-пакеты и отдельные чекбоксы со своей ценой, как в рабочем примере. Примерный код тут.

Но ума не приложу, как это реализовать.

Заранее благодарю за ответ.

javascript html checkbox

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Небольшой совет: такие объемные тексты лучше размещать в другом месте.

В данном случае отлично подойдет jsFiddle. Там можно будет не только показать код, но и сразу посмотреть как он работает.

Т.е. там можно сделать два проекта (без регистрации): первый - с тем, что есть сейчас, второй - с тем, что должно быть (примерно).

Либо, как вариант, делаете скришот того, что есть, делаете рисунок того, что должно, и выкладываете сюда. Того, что есть сейчас, - дополнительно выложить на jsFiddle.

Обновление

Вот так уже лучше ) Сразу понятно, что вы хотите. Вас чистый JS интересует? Или пример на jQuery можно привести?

Только небольшое уточнение: если я в первом блоке выбрал первый чекбокс, затем второй, то сумма не изменится? Ведь я ее уже изменил при нажатии на первый чекбокс. При этом если выбрать из второй группы элемент, то сумма изменится. Все верно?

Обновление

Посмотрите, в таком виде вас устроит решение: jsFiddle. Решение еще пилить и пилить надо, но для начала, думаю пойдет )

Answer 2

▲ 1

@alegraft, я так понимаю, что это у вас продолжается эпопея с чекбоксами )) И почему вы упорно ползёте к убогому коду? Обработчик событий внутри тегов - это не есть гуд! Если что-то нужно хранить в тегах элементов, то лучше это делать с помощью атрибута data-*. Если взять код из предыдущего вашего вопроса, то доработать его можно так.

<div class="block">
    <p><input type="checkbox" class="main">00</p>
    <input type="checkbox" data-price="100">01
    <input type="checkbox" data-price="150">02
    <input type="checkbox" data-price="180">03
</div>
<div class="block">
    <p><input type="checkbox" class="main">00</p>
    <input type="checkbox" data-price="250">01
    <input type="checkbox" data-price="55">02
    <input type="checkbox" data-price="75">03
</div>
<output></output>

JS

var allChbx = [],
    out = document.querySelector('output');
[].forEach.call(document.querySelectorAll('.block'), function(group){
    var main = group.querySelector('.main'),
        chbx = group.querySelectorAll('input[type=checkbox]:not(.main)');
    allChbx = allChbx.concat([].slice.call(chbx));
    main.addEventListener('change', function(){
        var stat = this.checked;
        [].forEach.call(chbx, function(el){
            el.checked = stat;
        });
        reCalc();
    });
    [].forEach.call(chbx, function(el){
        el.addEventListener('change',function(){
            var cnt = [].filter.call(chbx, function(el){
                return el.checked == true;
            }).length;
            main.checked = cnt > 0;
            reCalc();
        }, false);
    });
});
function reCalc(){
    var total = 0;
    allChbx.forEach(function(c){
        total += c.checked == true ? +c.dataset.price : 0;
    });
    out.innerHTML = 'Итого: <b>' + total + '</b> тугриков';
}

Самому же будет приятней работать, когда "мухи отдельно, а котлеты отдельно". Пусть JS будет в своём файле и не нужно его смешивать с HTML. Это же касается и CSS

CheckBox + калькулятор

Ответы