Javascript-форум - Калькулятор услуг

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Калькулятор услуг (https://javascript.ru/forum/events/57863-kalkulyator-uslug.html)

middlee

24.08.2015 10:24

Калькулятор услуг

Здравсвуйте, не могу реализовать калькулятор услуг, вот мой код

<input type="checkbox" value="500" name="sborka" id="sborka">
<input type="checkbox" value="300" name="dostavka" id="dostavka">

$(document).ready(function(){
     var totalSum = {$view.price};
     
    $('#sborka').click(function(event) {
       totalSum += parseInt($('#sborka').val());
       $('#totalsum').html(totalSum);
    });
     
    $('#dostavka').click(function(event) {
        totalSum += parseInt($('#dostavka').val());
        $('#totalsum').html(totalSum);
    });   
     $('#totalsum').html(totalSum);
});

Прибавляет к значению totalSum правильно, как сделать что-бы при повторном клике по чекбоксу (его деактивации), выполнялся вот такой код

totalSum -= parseInt($('#dostavka').val());

ksa	24.08.2015 11:15

Цитата:

Сообщение от middlee

как сделать что-бы при повторном клике по чекбоксу (его деактивации), выполнялся вот такой код

Проверять условие

if (this.checked) {}

ksa	24.08.2015 13:08

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	var totalSum = 1000;
    $('#sborka, #dostavka').click(function(event) {
		var n=parseInt(this.value);
		n=(this.checked)? n: -n;
		totalSum += n;
		$('#totalsum').html(totalSum);
    });
	$('#totalsum').html(totalSum);
});
</script>
</head>
<body>
<input type="checkbox" value="500" name="sborka" id="sborka">
<input type="checkbox" value="300" name="dostavka" id="dostavka">
<p id='totalsum'></p>
</body>
</html>

middlee

24.08.2015 13:20

Спасибо, сделал вот так

$('#sborka').click(function(event) {
        if (this.checked) {
            totalSum += parseInt($('#sborka').val());
        } else {
            totalSum -= parseInt($('#sborka').val());
        }
       $('#totalsum').html(totalSum);
    });

И сразу возникла такая же проблема с radio кнопками, местами меняю, к общей сумме плюсует, а как сделать, чтобы при смене кнопки старое значение отнимал незнаю, подскажете?

ksa	24.08.2015 13:21

Цитата:

Сообщение от middlee

сделал вот так

Две функции не нужны... :no:
Т.к. они делают одно и то же. ;)

ksa	24.08.2015 13:22

Цитата:

Сообщение от middlee

такая же проблема с radio кнопками

Где тестовый пример?

middlee

24.08.2015 13:27

<input type="radio" value="540" name="rol" id="njk">
<input type="radio" value="530" name="rol" id="lmt">

$(document).ready(function(){
     var totalSum = {$view.price};

$('input[name=rol]').click(function(event) {
       totalSum += parseInt($(this).val());
       $('#totalsum').html(totalSum);
});
 $('#totalsum').html(totalSum);
});

ksa	24.08.2015 14:00

middlee, на примеры ты явно скуп... :D
Просто не нужно "наращивать" значение. ;)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	var totalSum = 1000;
	$('input[name="rol"]').click(function(event) {
		var sum = totalSum + parseInt(this.value);
		$('#totalsum').text(sum);
	});
	$('#totalsum').html(totalSum);
});
</script>
</head>
<body>
<input type="radio" value="540" name="rol" id="njk" />
<input type="radio" value="530" name="rol" id="lmt" />
<p id='totalsum'></p>
</body>
</html>

middlee

24.08.2015 14:33

Спасибо еще раз, все считает, но вылезла еще одна проблема :)
Теперь он обнуляет значение totalSum каждый раз, когда переходишь на следующий радио блок или чекбокс, причем только сверху вниз, если начинать отмечать снизу вверх все считает нормально :)

$(document).ready(function(){
     var totalSum = {$view.price};
       
    $('input[name="roliki"]').click(function(event) {
        var sum = totalSum + parseInt(this.value);
        $('#totalsum').text(sum);
    });
    $('#totalsum').html(totalSum);
    
     
    $('input[name="mehanizm"]').click(function(event) {
        var sum = totalSum + parseInt(this.value);
        $('#totalsum').text(sum);
    });
    $('#totalsum').html(totalSum);
         
    
     $('#sborka').click(function(event) {
        if (this.checked) {
            totalSum += parseInt($('#sborka').val());
        } else {
            totalSum -= parseInt($('#sborka').val());
        }
       $('#totalsum').html(totalSum);
    });
     
    $('#dostavka').click(function(event) {
        if (this.checked) {
            totalSum += parseInt($('#dostavka').val());
        } else {
            totalSum -= parseInt($('#dostavka').val());
        }
        $('#totalsum').html(totalSum);
    });   
     $('#totalsum').html(totalSum);
});

<input type="radio" checked value="0" name="mehanizm">
<input type="radio" value="2090" name="mehanizm">

<input type="radio" checked value="0" name="roliki">
<input type="radio" value="540" name="roliki">
<input type="radio" value="530" name="roliki">

<input type="checkbox" value="300" name="dostavka" id="dostavka">
<input type="checkbox" value="500" name="sborka" id="sborka">

<div id="totalsum" style="display:inline">{$view.price}</div> руб.

ksa	24.08.2015 16:21

Цитата:

Сообщение от middlee

Теперь он обнуляет значение totalSum каждый раз, когда переходишь на следующий радио блок или чекбокс, причем только сверху вниз, если начинать отмечать снизу вверх все считает нормально

Я как ни клацал... Ничего криминального не нашел... :no:
Учись делать работающие тестовые примеры.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	var totalSum = 1000;
    $('input[name="roliki"], input[name="mehanizm"]').click(function(event) {
        var sum = totalSum + parseInt(this.value);
        $('#totalsum').text(sum);
    });
	$('#sborka, #dostavka').click(function(event) {
		if (this.checked) {
			totalSum += parseInt(this.value);
		} else {
			totalSum -= parseInt(this.value);
		}
		$('#totalsum').text(totalSum);
	});
	$('#totalsum').text(totalSum);
});
</script>
</head>
<body>
<div>
	<input type="radio" checked value="0" name="mehanizm">
	<input type="radio" value="2090" name="mehanizm">
</div>
<div>
	<input type="radio" checked value="0" name="roliki">
	<input type="radio" value="540" name="roliki">
	<input type="radio" value="530" name="roliki">
</div>
<div>
	<input type="checkbox" value="300" name="dostavka" id="dostavka">
	<input type="checkbox" value="500" name="sborka" id="sborka">
</div>
<p>
	<span id="totalsum" style="display:inline"></span> руб.
</p>
</body>
</html>

middlee

24.08.2015 16:28

Тут так же, если выбрать сперва 2ой радио в 1 строке, выводит 3090. После этого жмем второй из второй строки, выводит 1540.
Потом жмем второй из третей строки, выводит 1500.

А должен складывать все значения и вывести 3630 и 4130 соответственно, вот в чем у меня сложность очередная.

Получается что он радио(чекбоксы) с разными name начинает считать с дефолтного totalSum, в вашем примере с 1000.

ksa	24.08.2015 16:40

Цитата:

Сообщение от middlee

Получается что он радио(чекбоксы) с разными name начинает считать с дефолтного totalSum, в вашем примере с 1000.

Так они в моем примере и работали... :)

ksa	24.08.2015 16:51

Цитата:

Сообщение от middlee

Получается что он радио(чекбоксы) с разными name начинает считать с дефолтного totalSum, в вашем примере с 1000.

Просто нужно оба окурка давить вместе! (с) :D

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	var totalSum = 1000;
    $('input[name="roliki"], input[name="mehanizm"], #sborka, #dostavka').click(function(event) {
		calc();
    });
	$('#totalsum').text(totalSum);
	function calc() {
        var sum = totalSum;
		$('input[name="roliki"]:checked, input[name="mehanizm"]:checked, #sborka:checked, #dostavka:checked').each(function(){
			sum+=parseInt(this.value);
		});
        $('#totalsum').text(sum);
	};
});
</script>
</head>
<body>
<div>
	<input type="radio" checked value="0" name="mehanizm">
	<input type="radio" value="2090" name="mehanizm">
</div>
<div>
	<input type="radio" checked value="0" name="roliki">
	<input type="radio" value="540" name="roliki">
	<input type="radio" value="530" name="roliki">
</div>
<div>
	<input type="checkbox" value="300" name="dostavka" id="dostavka">
	<input type="checkbox" value="500" name="sborka" id="sborka">
</div>
<p>
	<span id="totalsum" style="display:inline"></span> руб.
</p>
</body>
</html>

middlee

24.08.2015 17:11

Во, спасибо огромное, я бы медотом тыка месяц эту форму мучал:D

Знания javascript'a хромают, на обе ноги)

Часовой пояс GMT +3, время: 14:52.