Форум

middlee · #1 (**permalink**) 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 · #2 (**permalink**) 24.08.2015, 11:15

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

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

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

if (this.checked) {}

ksa · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 24.08.2015, 13:21

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

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

Две функции не нужны...

Т.к. они делают одно и то же.

ksa · #6 (**permalink**) 24.08.2015, 13:22

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

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

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

middlee · #7 (**permalink**) 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 · #8 (**permalink**) 24.08.2015, 14:00

middlee, на примеры ты явно скуп...

Просто не нужно "наращивать" значение.

<!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 · #9 (**permalink**) 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 · #10 (**permalink**) 24.08.2015, 16:21

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

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

Я как ни клацал... Ничего криминального не нашел...

Учись делать работающие тестовые примеры.

<!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>

Форум

Справочник

Discord чат

Курсы javascript