Форум

imhateb · #1 (**permalink**) 16.09.2013, 20:25

Доброго времени суток.

Прошу помочь с решением проблемы. На странице несколько блоков с чекбоксами и полями для ввода количества для подсчёта. Вот таких:

<div>    
    <p><label><input type="checkbox" id="price_1" value="1500"> Добавить к раcсчёту</label></p>
    <p><label>Количество <input type="tel" id="qtty_1"></label></p>
    <p><label>Стоимость: <input type="tel" id='total_1'></label></p>
</div>

Сделать так, чтобы в одном блоке стоимость считалась только при отметке чекбокса я смог. Вот так:

$('#price_1').change(function () {

		var chbox_1 = $('#price_1').is(':checked');
				
		if (chbox_1 == true) {
			
			var qtty_1 = $('#qtty_1').val();
			var price_1 = $('#price_1').val();
			var total_1 = price_1 * qtty_1;
			$('#total_1').val(total_1);
			
			$('#qtty_1').change(function () {
				var qtty_1 = $('#qtty_1').val();
				var total_1 = price_1 * qtty_1;
				$('#total_1').val(total_1);
			});

		} else {$('#total_1').val(null);}
});

Во втором блоке - делаю всё тоже самое, только меняю ID элементов, в скрипте создаю ещё одну такую же функцию и меняю имена переменных (типа qtty_2, price_2, total_2, и т.д.). В третьем - то же самое, соответственно. И так далее...

Но так как таких вот блоков на странице несколько (около 20, типа наименования товаров), нужно, чтобы выводилась итоговая стоимость в блоке снизу. Но как сделать, чтобы total_1 и total_2 (и total_3 и т.д.) складывались - не могу сообразить. Это ж вроде локальные переменные получаются.

P.S. Думаю, и так понятно, что я новичок в этом деле. Нутром чувствую, что подобные манипуляции вообще не комильфо, и всё можно реализовать гораздо проще и более компактно. Так что буду признателен за ваши варианты, если вам будет не сложно.

Ну или хотя бы подскажите, как сложить промежуточные суммы, которые получаются в каждой из функций.

Заранее спасибо.

рони · #2 (**permalink**) 16.09.2013, 21:25

imhateb,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript">
$(document).ready(function(){
var total =  $('[id^=total]');
var div = $('div');

$("div").each(function(indx, element){
  var inputs = $('input', this);
  inputs.change(function () {
   var first = inputs.eq(0);
   var two = inputs.eq(1);
   var checked =  first.prop('checked');
   inputs.eq(2).val(checked ? first.val()*two.val():'')
   var sum = 0;
   total.each(function(){
    $(this).val() && (sum+= $(this).val()|0)
   })
   $('#all').val(sum)
});
});
});
  </script>

</head>

<body>
<div>
    <p><label><input type="checkbox" id="price_1" value="1500"> Добавить к раcсчёту</label></p>
    <p><label>Количество <input type="tel" id="qtty_1"></label></p>
    <p><label>Стоимость: <input type="tel" id='total_1'></label></p>
</div>
<div>
    <p><label><input type="checkbox" id="price_1" value="1500"> Добавить к раcсчёту</label></p>
    <p><label>Количество <input type="tel" id="qtty_1"></label></p>
    <p><label>Стоимость: <input type="tel" id='total_1'></label></p>
</div>
    <p><label>Общая Стоимость: <input type="tel" id='all'></label></p>
</body>

</html>

imhateb · #3 (**permalink**) 16.09.2013, 21:48

Блин, спасибо огромное! Слов нет, как благодарен. Счастья Вам и благополучия во всём. От души!

Форум

Справочник

Discord чат

Курсы javascript