Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2015, 10:24
Интересующийся
Отправить личное сообщение для middlee Посмотреть профиль Найти все сообщения от middlee
 
Регистрация: 24.08.2015
Сообщений: 15

Калькулятор услуг
Здравсвуйте, не могу реализовать калькулятор услуг, вот мой код
<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());
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2015, 11:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

if (this.checked) {}
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2015, 13:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2015, 13:20
Интересующийся
Отправить личное сообщение для middlee Посмотреть профиль Найти все сообщения от middlee
 
Регистрация: 24.08.2015
Сообщений: 15

Спасибо, сделал вот так
$('#sborka').click(function(event) {
        if (this.checked) {
            totalSum += parseInt($('#sborka').val());
        } else {
            totalSum -= parseInt($('#sborka').val());
        }
       $('#totalsum').html(totalSum);
    });

И сразу возникла такая же проблема с radio кнопками, местами меняю, к общей сумме плюсует, а как сделать, чтобы при смене кнопки старое значение отнимал незнаю, подскажете?
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2015, 13:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от middlee
сделал вот так
Две функции не нужны...
Т.к. они делают одно и то же.
Ответить с цитированием
  #6 (permalink)  
Старый 24.08.2015, 13:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от middlee
такая же проблема с radio кнопками
Где тестовый пример?
Ответить с цитированием
  #7 (permalink)  
Старый 24.08.2015, 13:27
Интересующийся
Отправить личное сообщение для middlee Посмотреть профиль Найти все сообщения от middlee
 
Регистрация: 24.08.2015
Сообщений: 15

<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);
});
Ответить с цитированием
  #8 (permalink)  
Старый 24.08.2015, 14:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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>
Ответить с цитированием
  #9 (permalink)  
Старый 24.08.2015, 14:33
Интересующийся
Отправить личное сообщение для middlee Посмотреть профиль Найти все сообщения от middlee
 
Регистрация: 24.08.2015
Сообщений: 15

Спасибо еще раз, все считает, но вылезла еще одна проблема
Теперь он обнуляет значение 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> руб.
Ответить с цитированием
  #10 (permalink)  
Старый 24.08.2015, 16:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Калькулятор услуг nigga_ninja Events/DOM/Window 2 11.08.2015 08:24
Калькулятор услуг tarantino Javascript под браузер 1 30.07.2015 00:21
Нужен калькулятор клининговых услуг abduRahman Работа 1 19.04.2014 02:30
Калькулятор услуг fabian89 Работа 22 19.11.2013 01:00
Нужен калькулятор услуг lukfm Работа 7 17.11.2013 15:15