Доработка калькулятора цен на jQuery

@Горец · Регистрация: 12.08.2012

Студворк — интернет-сервис помощи студентам

Всем привет!
Прошу разбирающихся хорошо в JavaScript помочь доработать скрипт калькулятора цен, а то у меня java хромает ...
В общем, есть скрипт, всё работает, но на данный момент возможно выбирать только по одной позиции из прайса, а мне нужно добавить возможность выбора к примеру трёх деталей одной позиции прайса, вот никак у меня не получается у самого...
Вот сам скрипт калькулятора:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
$('label').click(function() {
var total = 0;
$('.option:checked').each(function() {
total += parseInt($(this).val());
$(this).parent().css('background', 'gold');
});
$('.option:not(:checked)').each(function() {
$(this).parent().css('background', '#fff');
});
/* Вычисляем общую сумму и прибавляем 50% накрутки 1.50 */
$('#total').html(total * 1.50 + '&nbsp;&euro;');
});
});

Работает данный калькулятор с jQuery.
Ниже приведу HTML код макета страницы с прайсом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Прайс-лист на фасады</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</head>
<body>
<div style="width:1000px; margin:25px auto;">
<label><input class="option" type="checkbox" value="24" />&nbsp;Фасад глухой 1</label><br />
<label><input class="option" type="checkbox" value="28" />&nbsp;Фасад глухой 2</label><br />
<label><input class="option" type="checkbox" value="37" />&nbsp;Фасад глухой 3</label><br />
<label><input class="option" type="checkbox" value="45" />&nbsp;Фасад глухой 4</label><br />
<label><input class="option" type="checkbox" value="55" />&nbsp;Фасад глухой 5</label><br />
<div id="total">0&nbsp;&euro;</div>
</div>
</body>
</html>

Буду очень признателен если выручите...

@Soldado · 13.08.2012, 20:56

Выбор количества и типа фасада в любой последовательности.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
function podschiot() {
var total = 0;
$('.option:checked').each(function() {
/* Для выбранного фасада извлекаем количество */
var countF= parseInt($(this).parent().next().find('option:selected').text());
total += parseInt($(this).val())*countF;
$(this).parent().css('background', 'gold');
});
$('.option:not(:checked)').each(function() {
$(this).parent().css('background', '#fff');
});
/* Вычисляем общую сумму и прибавляем 50% накрутки 1.50 */
$('#total').html(total * 1.50 + '&nbsp;&euro;');
};
 
$('label').bind ('click', podschiot);
$('.vibor').bind ('change', podschiot);
});/*end ready*/

Количество сделал максимум 5, если решите добавить больше, то скрипт переделывать не нужно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<body>
<div style="width:1000px; margin:25px auto;">
<label><input class="option" type="checkbox" value="24" />&nbsp;Фасад глухой 1</label>
_______Количество:
<select  class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>   <br />
<label><input class="option" type="checkbox" value="28" />&nbsp;Фасад глухой 2</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<label><input class="option" type="checkbox" value="37" />&nbsp;Фасад глухой 3</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<label><input class="option" type="checkbox" value="45" />&nbsp;Фасад глухой 4</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<label><input class="option" type="checkbox" value="55" />&nbsp;Фасад глухой 5</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<div id="total">0&nbsp;&euro;</div>
</div>
</body>

Добавлено через 17 минут
Увидеть всё можно здесь

@Горец · 13.08.2012, 21:27 **[ТС]**

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

Выбор количества и типа фасада в любой последовательности.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
function podschiot() {
var total = 0;
$('.option:checked').each(function() {
/* Для выбранного фасада извлекаем количество */
var countF= parseInt($(this).parent().next().find('option:selected').text());
total += parseInt($(this).val())*countF;
$(this).parent().css('background', 'gold');
});
$('.option:not(:checked)').each(function() {
$(this).parent().css('background', '#fff');
});
/* Вычисляем общую сумму и прибавляем 50% накрутки 1.50 */
$('#total').html(total * 1.50 + '&nbsp;&euro;');
};
 
$('label').bind ('click', podschiot);
$('.vibor').bind ('change', podschiot);
});/*end ready*/

Количество сделал максимум 5, если решите добавить больше, то скрипт переделывать не нужно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<body>
<div style="width:1000px; margin:25px auto;">
<label><input class="option" type="checkbox" value="24" />&nbsp;Фасад глухой 1</label>
_______Количество:
<select  class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>   <br />
<label><input class="option" type="checkbox" value="28" />&nbsp;Фасад глухой 2</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<label><input class="option" type="checkbox" value="37" />&nbsp;Фасад глухой 3</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<label><input class="option" type="checkbox" value="45" />&nbsp;Фасад глухой 4</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<label><input class="option" type="checkbox" value="55" />&nbsp;Фасад глухой 5</label>
_______Количество:
<select class="vibor">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<br />
<div id="total">0&nbsp;&euro;</div>
</div>
</body>

Добавлено через 17 минут
Увидеть всё можно здесь

Здравствуйте!
Наконец то хоть кто то ответил и по теме, спасибо большое, я уж и не надеялся... и навоял тут сам малость, но как я уже писал у меня JavaScript хромает и не совсем тот результат получил который хотелось бы...
В общем приведу ниже то что у меня получилось пока что, проблема в том что когда отмечаю только чекбокс и не отмечаю количество деталей выдаётся NaN а хотелось бы когда не отмечено количество чтоб осталось 0(ноль) и только после добавления количества деталей начал считать, в общем кто может, пожалуйста помогите доработать скрипт до рабочего/некорявого состояния.
JavaScript:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
$('label').click(function() {
var total = 0;
var multiple = 1;
$('.option:checked').each(function() {
multiple = parseInt($(this).parent().next().val());
total += parseInt($(this).val()) * multiple;
$(this).parent().css('background', 'gold');
});
$('.option:not(:checked)').each(function() {
$(this).parent().css('background', '#fff');
});
$('#total').html(total * 1.50 + '&nbsp;&euro;');
});
});

HTML код без стилей:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Прайс-лист на фасады</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</head>
<body>
<div style="width:1000px; margin:25px auto;">
<label><input class="option" type="checkbox" value="24" />&nbsp;Фасад глухой 1</label>&nbsp;&nbsp;Количество&nbsp;<input type="text" size="1" multiple="multiple" /><br />
<label><input class="option" type="checkbox" value="28" />&nbsp;Фасад глухой 2</label>&nbsp;&nbsp;Количество&nbsp;<input type="text" size="1" multiple="multiple" /><br />
<label><input class="option" type="checkbox" value="37" />&nbsp;Фасад глухой 3</label>&nbsp;&nbsp;Количество&nbsp;<input type="text" size="1" multiple="multiple" /><br />
<label><input class="option" type="checkbox" value="76" />&nbsp;Фасад глухой 4</label>&nbsp;&nbsp;Количество&nbsp;<input type="text" size="1" multiple="multiple" /><br />
<label><input class="option" type="checkbox" value="23" />&nbsp;Фасад глухой 5</label>&nbsp;&nbsp;Количество&nbsp;<input type="text" size="1" multiple="multiple" /><br />
<div id="total">0&nbsp;&euro;</div>
</div>
</body>
</html>

Спасибо за отклики.

Добавлено через 17 минут
P.S.
Мой HTML можно менять, я не привязан пока что сильно к нему, единственное пожелание, чтоб код не был громоздким.

@Soldado · 14.08.2012, 00:09

Так как Вы хотите - получается более громоздко, нужно учитывать много условий (Если введены буквы, введено количество, а затем изменено или вообще удалено, нужно подсказывать если пользователь забыл указать количество - думает, что выделил и оно посчиталось и т.д.)
Вот смотрите, что у меня получилось здесь.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function() {
function podschiot() {
var total = 0;
var multiple = 1;
$('.option:checked').each(function() {
multiple = parseInt($(this).parent().next().val());
if (isNaN(multiple))
{
$(this).parent().next().css('background', '#ffaeae').val("");
}
else
{
total += parseInt($(this).val()) * multiple;
$(this).parent().css('background', 'gold');
 
}});
$('.option:not(:checked)').each(function() {
$(this).parent().css('background', '#fff');
});
$('#total').html(total * 1.50 + '&nbsp;&euro;');
};
$('.count').keyup(function() {
if ($(this).val()==""){$(this).prev('label').find('.option').removeAttr('checked')};
$(this).prev('label').find('.option').parent().css('background', '#ffffff');
$(this).css('background', '#ffffff');
podschiot(); 
});
$('label').bind ('click', podschiot);
});/*end ready*/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div style="width:1000px; margin:25px auto;">
<label><input class="option" type="checkbox" value="24" />&nbsp;Фасад глухой 1</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="28" />&nbsp;Фасад глухой 2</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="37" />&nbsp;Фасад глухой 3</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="76" />&nbsp;Фасад глухой 4</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="23" />&nbsp;Фасад глухой 5</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
<div id="total">0&nbsp;&euro;</div>
</div>
</body>

Ответить в теме смогу не раньше 15.08.2012

@Горец · 14.08.2012, 00:18 **[ТС]**

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

Так как Вы хотите - получается более громоздко, нужно учитывать много условий (Если введены буквы, введено количество, а затем изменено или вообще удалено, нужно подсказывать если пользователь забыл указать количество - думает, что выделил и оно посчиталось и т.д.)
Вот смотрите, что у меня получилось здесь.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function() {
function podschiot() {
var total = 0;
var multiple = 1;
$('.option:checked').each(function() {
multiple = parseInt($(this).parent().next().val());
if (isNaN(multiple))
{
$(this).parent().next().css('background', '#ffaeae').val("");
}
else
{
total += parseInt($(this).val()) * multiple;
$(this).parent().css('background', 'gold');
 
}});
$('.option:not(:checked)').each(function() {
$(this).parent().css('background', '#fff');
});
$('#total').html(total * 1.50 + '&nbsp;&euro;');
};
$('.count').keyup(function() {
if ($(this).val()==""){$(this).prev('label').find('.option').removeAttr('checked')};
$(this).prev('label').find('.option').parent().css('background', '#ffffff');
$(this).css('background', '#ffffff');
podschiot(); 
});
$('label').bind ('click', podschiot);
});/*end ready*/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div style="width:1000px; margin:25px auto;">
<label><input class="option" type="checkbox" value="24" />&nbsp;Фасад глухой 1</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="28" />&nbsp;Фасад глухой 2</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="37" />&nbsp;Фасад глухой 3</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="76" />&nbsp;Фасад глухой 4</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
 
<label><input class="option" type="checkbox" value="23" />&nbsp;Фасад глухой 5</label>&nbsp;&nbsp;Количество&nbsp;
 <input type="text" size="1" multiple="multiple" class="count" MAXLENGTH="2"/><br />
<div id="total">0&nbsp;&euro;</div>
</div>
</body>

Ответить в теме смогу не раньше 15.08.2012

Отлично, мне нравится, в принципе примерно то что я хотел. Объясню ситуацию: это не для пользователей, для меня..., есть прайс лист в exel и он кучно сделан и не удобно работать, я же придумал сделать так, чтоб разделить по моделям и сделать в стиле tab контента с данным прайс-листом/калькулятором, мне будет на много проще работать и ориентироваться в прайсе, а сам прайс в стиле зебры..., ну там свои задумки, с дизайном у меня всё нормально, html и css достаточно хорошо знаю.
Спасибо огромное за помощь!!!

@Alexei91 · 24.12.2013, 20:33

а можно как-нибудь тоже самое но без chekbox?

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Alexei91 0 / 0 / 0 Регистрация: 13.09.2013 Сообщений: 16
	24.12.2013, 20:33
	а можно как-нибудь тоже самое но без chekbox? 0