Калькулятор JQUERY с радиокнопками

147

03 февраля 2020, 17:40

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

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

$("#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" хотя по замыслу он должен быть только у выделенной радиокнопки.

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

Answer 1

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);
    }
});

Answer 2

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

$('.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); 
    });