1

Очень быстро нужно накидать калькулятор для сайта.

Вот заготовка:

$("#calculator_total span").text("0");
var totalSum = 0;
$('.service').on("change",function(){
        if ($(this).prop('checked')==true) {
            var inputService = parseInt($("input[name='service']:checked").val());
            $("input[name='service']:checked").parent("p").addClass("checked");
            totalSum += inputService;
            $("#calculator_total").find('span').text(totalSum);
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_group service content">
                <h3>Выберите тип работ:</h3>
                <p><input class="service" type="radio" name="service" value="350">Установка выключателей</p>
                <p><input class="service" type="radio" name="service" value="800">Установка электрического щитка</p>
                <p><input class="service" type="radio" name="service" value="1200">Установка автомата</p>
                <p><input class="service" type="radio" name="service" value="850">Установка розеток</p>
                <p><input class="service" type="radio" name="service" value="920">Разводка труб водоснабжения</p>
                <p><input class="service" type="radio" name="service" value="670">Установка полотенцесушителя</p>
                <p><input class="service" type="radio" name="service" value="225">Установка унитаза</p>
                <p><input class="service" type="radio" name="service" value="1350">Установка ванны</p>
            </div>
            <div id="total_head">Итого</div>
                        <div id="calculator_total"><span id="calculator_sum"></span><i class="far fa-ruble-sign"></i></div>
                        <p>Получите скидку <span class="text_bold rem_red">25%</span> при заказе ремонта под ключ.</p>
                        <p id="val_phone"><input type="checkbox" id="calc_key" name="calc_key" value="Ремонт под ключ"> Ремонт под ключ</p>
                        <p><input type="tel" id="calc_phone" name="calc_phone" placeholder="Введите ваш номер телефона"></p>
                        <div id="calculator_submit"><button class="submit" type="button">Отправить расчет</button></div>
                        <div id="status_message"></div>

Но как видите, он постоянно плюсует value радиокнопок, а по замыслу должен плюсовать только value выбранной радиокнопки

Плюсом к этому у абзаца

при последовательном переключении радиокнопок, добавляется класс "checked" хотя по замыслу он должен быть только у выделенной радиокнопки.

Подскажите что не так намудрил?

1
  • totalSum = inputService;
    – user176262
    Commented 20 апр. 2019 в 20:12

2 ответа 2

0
var totalSum = 0;
var lastService = 0;
$('.service').on("change",function(){
    if ($(this).prop('checked')==true) {
        var inputService = parseInt($("input[name='service']:checked").val());
        $("input[name='service']:checked").parent("p").addClass("checked");
        totalSum = totalSum - lastService;
        totalSum += inputService;
        lastService = inputService;
        $("#calculator_total").find('span').text(totalSum);
    }
});
1
  • Спасибо, разобрался. А какую проверку можно добавить, если уже заполнено поле "Площадь стен(#inputWalls)", при переключении радиокнопок чтобы сумма пересчитывалась в зависимости от значения выбранной радиокнопки? Commented 20 апр. 2019 в 21:46
0

Есть еще один момент, разделов калькулятора несколько:

$('.walls').on("change",function(){
        if ($(this).prop('checked')==true) {
            $(".input_size_walls").css('display', 'block');
        }
        $("input[name='walls']:checked").parent("p").addClass("checked");
    });
    $("#inputWalls").on("change",function() {
        var inputWalls = parseInt($(this).val()) * parseInt($("input[name='walls']:checked").val());
        if ($(this).val() > 0) {
            $("#inputWalls").each(function() {
                totalSum += inputFloor;
            });
        }
        $("#calculator_total").find('span').text(totalSum);
    });

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.