01.<!doctype html>
02.<html lang="en">
03.<head>
04.<meta charset="utf-8" />
05.<title>jQuery Calculator</title>
06.
08.
09.</head>
10.<body>
11.
12.<label for="txt1">Text 1 : </label>
13.<input type="text" name="txt1" id="txt1" class="price"><br>
14.
15.<label for="txt2">Text 2 : </label>
16.<input type="text" name="txt2" id="txt2" class="price"><br>
17.
18.<label for="txt3">Text 3 : </label>
19.<input type="text" name="txt3" id="txt3" class="price"><br>
20.
21.<label for="txt4">Text 4 : </label>
22.<input type="text" name="txt4" id="txt4" class="price"><br>
23.
24.<label for="txt5">Text 5 : </label>
25.<input type="text" name="txt5" id="txt5" class="price"><br>
26.
27.<input type="button" name="btn_calculator" id="btn_calculator" class="btn_calculator" value="Calculator"><br>
28.
29.<label for="txt_sum">Total : </label>
30.<input type="text" name="txt_sum" id="txt_sum">
31.
32.<hr>
33.
34.<div id="show_txt">Total : ???</div>
35.
36.</body>
37.</html>
38.<script>
39.
40.$('.btn_calculator').click(function(){
41.
42.var sum = 0;
43.$('.price').each(function(){
44. sum += parseFloat($(this).val());
45.
46.});
47.
48.$('#txt_sum').val(sum.toFixed(2));
49.$('#show_txt').text("Total : "+sum.toFixed(2));
50.
51.});
52.
53.</script>
