Калькулятор услуг
Здравсвуйте, не могу реализовать калькулятор услуг, вот мой код
<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()); |
Цитата:
if (this.checked) {} |
Как вариант...
<!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> |
Спасибо, сделал вот так
$('#sborka').click(function(event) { if (this.checked) { totalSum += parseInt($('#sborka').val()); } else { totalSum -= parseInt($('#sborka').val()); } $('#totalsum').html(totalSum); }); И сразу возникла такая же проблема с radio кнопками, местами меняю, к общей сумме плюсует, а как сделать, чтобы при смене кнопки старое значение отнимал незнаю, подскажете? |
Цитата:
Т.к. они делают одно и то же. ;) |
Цитата:
|
<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); }); |
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> |
Спасибо еще раз, все считает, но вылезла еще одна проблема :)
Теперь он обнуляет значение 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> руб. |
Цитата:
Учись делать работающие тестовые примеры. <!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> |
Часовой пояс GMT +3, время: 01:15. |