jQueryで合計金額を計算したい

###前提・実現したいこと
いつもお世話になっております。
現在、チェックボックスにチェックを入れたら各商品の個数を変更できるようにし、その商品の金額と個数を乗算したもをテキストフィールドに表示をするという事をしております。

1商品毎の計算は現時点では問題なく動いているのですが、
以下の動きが実現できません。

・「商品合計（税込）」というテキストフィールドに5商品の加算したものを表示
・「送料」というテキストフィールドに5商品全てのセレクトボックスで選択された個数を乗算したものを表示
・「合計（税込）」というテキストフィールドに「商品合計（税込）」と「送料」を加算したものを表示

※「送料」は1個につき「315円」を加算したいです。

お手数おかけしますが、ご教授よろしくお願いします。

###該当のソースコード

javascript
1<script>
2$(function() {
3    
4    //チェックボックスにチェックをいれないと選択不可    
5    $('[name=item0], [name=item2], [name=item3], [name=item4], [name=item5]').prop('disabled', true);
6
7    //金額表示選択不可
8    $('[name=field0], [name=field2], [name=field3], [name=field4], [name=field5]').prop('disabled', true);
9
10    //合計金額
11    $('[name=field_total], [name=field_postage], [name=field_total2]').prop('disabled', true);
12
13    //item1
14    $('[name=itemlist1]').on('click', function() {
15
16        //チェックされていない場合は入力不可
17        if (!$('[name=itemlist1]').prop('checked')) {
18            $('[name=item0]').prop('disabled', true);
19            $(".item-wrap1").css('background-color', 'rgb(255, 255, 255)');
20        }
21        //チェックされていたら入力可能
22        else if ($('[name=itemlist1]').prop('checked')) {
23            $('[name=item0]').prop('disabled', false);
24            $(".item-wrap1").css('background-color', 'rgb(250, 250, 242)');
25        }
26    });
27
28    //item2
29    $('[name=itemlist2]').on('click', function() {
30        //チェックされていない場合は入力不可
31        if (!$('[name=itemlist2]').prop('checked')) {
32            $('[name=item2]').prop('disabled', true);
33            $(".item-wrap2").css('background-color', 'rgb(255, 255, 255)');
34        }
35        //チェックされていたら入力可能
36        else if ($('[name=itemlist2]').prop('checked')) {
37            $('[name=item2]').prop('disabled', false);
38            $(".item-wrap2").css('background-color', 'rgb(250, 250, 242)');
39        }
40    });
41
42    //item3
43    $('[name=itemlist3]').on('click', function() {
44        //チェックされていない場合は入力不可
45        if (!$('[name=itemlist3]').prop('checked')) {
46            $('[name=item3]').prop('disabled', true);
47            $(".item-wrap3").css('background-color', 'rgb(255, 255, 255)');
48        }
49        //チェックされていたら入力可能
50        else if ($('[name=itemlist3]').prop('checked')) {
51            $('[name=item3]').prop('disabled', false);
52            $(".item-wrap3").css('background-color', 'rgb(250, 250, 242)');
53        }
54    });
55
56    //item4
57    $('[name=itemlist4]').on('click', function() {
58        //チェックされていない場合は入力不可
59        if (!$('[name=itemlist4]').prop('checked')) {
60            $('[name=item4]').prop('disabled', true);
61            $(".item-wrap4").css('background-color', 'rgb(255, 255, 255)');
62        }
63        //チェックされていたら入力可能
64        else if ($('[name=itemlist4]').prop('checked')) {
65            $('[name=item4]').prop('disabled', false);
66            $(".item-wrap4").css('background-color', 'rgb(250, 250, 242)');
67        }
68    });
69
70    //item5
71    $('[name=itemlist5]').on('click', function() {
72        //チェックされていない場合は入力不可
73        if (!$('[name=itemlist5]').prop('checked')) {
74            $('[name=item5]').prop('disabled', true);
75            $(".item-wrap5").css('background-color', 'rgb(255, 255, 255)');
76        }
77        //チェックされていたら入力可能
78        else if ($('[name=itemlist5]').prop('checked')) {
79            $('[name=item5]').prop('disabled', false);
80            $(".item-wrap5").css('background-color', 'rgb(250, 250, 242)');
81        }
82    });
83
84
85    $('[name=itemlist1]').click(function() {
86        if ($(this).is(':checked')) {
87
88            $('[name="item0"]').on('change', function() {
89                var itemPrice1 = 5076;
90                var itemPriceCount1 = $('[name="item0"] option:selected').text();
91                $('[name="field0"]').val((parseInt(itemPrice1) * itemPriceCount1).toLocaleString());
92            });
93
94        } else {
95            $('[name="item0"] option').prop("selected", false);
96            $('[name="field0"]').val(0);
97        }
98
99    });
100
101
102    $('[name=itemlist2]').click(function() {
103        if ($(this).is(':checked')) {
104
105            $('[name="item2"]').on('change', function() {
106                var itemPrice2 = 5076;
107                var itemPriceCount2 = $('[name="item2"] option:selected').text();
108                $('[name="field2"]').val((parseInt(itemPrice2) * itemPriceCount2).toLocaleString());
109            });
110
111        } else {
112            $('[name="item2"] option').prop("selected", false);
113            $('[name="field2"]').val(0);
114        }
115
116    });
117
118
119    $('[name=itemlist3]').click(function() {
120        if ($(this).is(':checked')) {
121
122            $('[name="item3"]').on('change', function() {
123                var itemPrice3 = 3780;
124                var itemPriceCount3 = $('[name="item3"] option:selected').text();
125                $('[name="field3"]').val((parseInt(itemPrice3) * itemPriceCount3).toLocaleString());
126            });
127
128        } else {
129            $('[name="item3"] option').prop("selected", false);
130            $('[name="field3"]').val(0);
131        }
132
133    });
134
135    $('[name=itemlist4]').click(function() {
136        if ($(this).is(':checked')) {
137
138            $('[name="item4"]').on('change', function() {
139                var itemPrice4 = 3780;
140                var itemPriceCount4 = $('[name="item4"] option:selected').text();
141                $('[name="field4"]').val((parseInt(itemPrice4) * itemPriceCount4).toLocaleString());
142            });
143
144        } else {
145            $('[name="item4"] option').prop("selected", false);
146            $('[name="field4"]').val(0);
147        }
148
149    });
150
151    $('[name=itemlist5]').click(function() {
152        if ($(this).is(':checked')) {
153
154            $('[name="item5"]').on('change', function() {
155                var itemPrice5 = 6156;
156                var itemPriceCount5 = $('[name="item5"] option:selected').text();
157                $('[name="field5"]').val((parseInt(itemPrice5) * itemPriceCount5).toLocaleString());
158            });
159
160        } else {
161            $('[name="item5"] option').prop("selected", false);
162            $('[name="field5"]').val(0);
163        }
164
165    });
166
167});
168</script>

###補足情報(言語/FW/ツール等のバージョンなど)
HTMLのコードが長くなり1000文字を超えたので、こちらの質問ではHTMLは記載しておりません。
開発環境にてご確認して頂けると幸いです。

開発環境URL
https://cart-price-yujiokayama.c9users.io/index.html

行動規範の内容に同意します

回答1件

ベストアンサー

今のままのデータ構造で処理をするのであればこんな感じ
単価はどこで持つかによりますが別途hiddenなどでhtmlから抜き出さないほうがよいです

HTML
1<script>
2$(function(){
3  $('[name^=itemlist],select.inputConts3').on('change',function(){
4    $('[name=field_total]').val(0);
5    $('[name=field_postage]').val(0);
6    $('[name=field_total2]').val(0);
7    $('[name^=itemlist]').each(function(){
8      var num=$(this).attr('name').match(/^itemlist(\d+)$/)[1];
9      var p=$(this).siblings('span.itemName').find('span.itemPrice').text().replace(",","").match(/\d+/)[0];
10      var n=$(this).parents('label').siblings('div.itemBtnConts2').find('select.inputConts3').val();
11      var a=$(this).parents('label').siblings('div.itemBtnConts2').find('input.inputConts4').val(p*n);
12      if($(this).prop('checked')){
13        $('[name=field_total]').val(parseInt($('[name=field_total]').val())+p*n);
14        $('[name=field_postage]').val(parseInt($('[name=field_postage]').val())+315*n);
15        $('[name=field_total2]').val(parseInt($('[name=field_total2]').val())+p*n+315*n);
16      }
17    });
18  });
19});
20</script>
21
22<div class="recordConts">
23<div class="recordList cf">
24<div class="bar"></div>
25<p class="recordTtl">ご注文の商品</p>
26</div>
27<div class="mb40">
28<p>ご注文した商品を選択してください。<span class="required">必須</span></p>
29<div class="mt20 item-wrap1">
30<label class="itemBtnConts label-checkbox">
31<p class="cf itemTop">
32<input type="checkbox" name="itemlist1" value="アジサイ（ピンク）" class="flL itemCheck checkbox" >
33<span class="lever flL"></span><span class="flL itemName">アジサイ（ピンク）<br>
34<span class="itemPrice">\5,076(税込)</span></span> </p>
35</label>
36<div class="itemBtnConts2">
37<div class="cf itemBottom"> <span class="flL quantityTtl">数量</span> <span class="flL quantityMemu">
38<select name="item0" class="inputConts3">
39<option>0</option>
40<option>1</option>
41<option>2</option>
42<option>3</option>
43<option>4</option>
44<option>5</option>
45<option>6</option>
46<option>7</option>
47<option>8</option>
48<option>9</option>
49<option>10</option>
50</select>
51</span>
52<div class="flR quantityFee taR"><span class="fz18 vaM">￥</span>
53<input type="text" name="field0" value="0" class="inputConts4">
54<div class="kosuu"></div>
55<span class="zeiMini">（税込）</span></div>
56</div>
57</div>
58</div>
59<div class="mt20 item-wrap2">
60<label class="itemBtnConts label-checkbox">
61<p class="cf itemTop">
62<input type="checkbox" name="itemlist2" value="アジサイ（ブルー）" class="flL itemCheck checkbox" >
63<span class="lever flL"></span><span class="flL itemName">アジサイ（ブルー）<br>
64<span class="itemPrice">\5,076(税込)</span></span> </p>
65</label>
66<div class="itemBtnConts2">
67<div class="cf itemBottom"> <span class="flL quantityTtl">数量</span> <span class="flL quantityMemu">
68<select name="item2" class="inputConts3">
69<option>0</option>
70<option>1</option>
71<option>2</option>
72<option>3</option>
73<option>4</option>
74<option>5</option>
75<option>6</option>
76<option>7</option>
77<option>8</option>
78<option>9</option>
79<option>10</option>
80</select>
81</span>
82<div class="flL quantityFee taR"><span class="fz18 vaM">￥</span>
83<input type="text" name="field2" value="0" class="inputConts4">
84<span class="zeiMini">（税込）</span></div>
85</div>
86</div>
87</div>
88<div class="mt20 item-wrap3">
89<label class="itemBtnConts label-checkbox">
90<p class="cf itemTop">
91<input type="checkbox" name="itemlist3" value="アジサイ（ブルー）" class="flL itemCheck checkbox" >
92<span class="lever flL"></span><span class="flL itemName">アジサイ（ピンク）<br>
93<span class="itemPrice">\5,076(税込)</span></span> </p>
94</label>
95<div class="itemBtnConts2">
96<div class="cf itemBottom"> <span class="flL quantityTtl">数量</span> <span class="flL quantityMemu">
97<select name="item3" class="inputConts3">
98<option>0</option>
99<option>1</option>
100<option>2</option>
101<option>3</option>
102<option>4</option>
103<option>5</option>
104<option>6</option>
105<option>7</option>
106<option>8</option>
107<option>9</option>
108<option>10</option>
109</select>
110</span>
111<div class="flL quantityFee taR"><span class="fz18 vaM">￥</span>
112<input type="text" name="field3" value="0" class="inputConts4">
113<span class="zeiMini">（税込）</span></div>
114</div>
115</div>
116</div>
117<div class="mt20 item-wrap4">
118<label class="itemBtnConts label-checkbox">
119<p class="cf itemTop">
120<input type="checkbox" name="itemlist4" value="アジサイ（ピンク）" class="flL itemCheck checkbox" >
121<span class="lever flL"></span><span class="flL itemName">アジサイ（ピンク）<br>
122<span class="itemPrice">\5,076(税込)</span></span> </p>
123</label>
124<div class="itemBtnConts2">
125<div class="cf itemBottom"> <span class="flL quantityTtl">数量</span> <span class="flL quantityMemu">
126<select name="item4" class="inputConts3">
127<option>0</option>
128<option>1</option>
129<option>2</option>
130<option>3</option>
131<option>4</option>
132<option>5</option>
133<option>6</option>
134<option>7</option>
135<option>8</option>
136<option>9</option>
137<option>10</option>
138</select>
139</span>
140<div class="flL quantityFee taR"><span class="fz18 vaM">￥</span>
141<input type="text" name="field4" value="0" class="inputConts4">
142<span class="zeiMini">（税込）</span></div>
143</div>
144</div>
145</div>
146<div class="mt20 item-wrap5">
147<label class="itemBtnConts label-checkbox">
148<p class="cf itemTop">
149<input type="checkbox" name="itemlist5" value="アジサイ（ピンク）" class="flL itemCheck checkbox" >
150<span class="lever flL"></span><span class="flL itemName">アジサイ（ピンク）<br>
151<span class="itemPrice">\5,076(税込)</span></span> </p>
152</label>
153<div class="itemBtnConts2">
154<div class="cf itemBottom"> <span class="flL quantityTtl">数量</span> <span class="flL quantityMemu">
155<select name="item5" class="inputConts3">
156<option>0</option>
157<option>1</option>
158<option>2</option>
159<option>3</option>
160<option>4</option>
161<option>5</option>
162<option>6</option>
163<option>7</option>
164<option>8</option>
165<option>9</option>
166<option>10</option>
167</select>
168</span>
169<div class="flL quantityFee taR"><span class="fz18 vaM">￥</span>
170<input type="text" name="field5" value="0" class="inputConts4">
171<span class="zeiMini">（税込）</span></div>
172</div>
173</div>
174</div>
175</div>
176
177<div class="mb40 totalFeeConts">
178<div class="cf mb10">
179<p class="flL totalTxtMini mt5">商品合計<span class="zeiMini">（税込）</span></p>
180<p class="flR priceMini taR w40p" name="itemtotal"><span class="taR">￥</span>
181<input type="text" name="field_total" value="0" class="inputConts5 taR">
182</p>
183</div>
184<div class="cf mb10">
185<p class="flL totalTxtMini mt5">送料</p>
186<p class="flR priceMini w40p taR" name="postage">￥
187<input type="text" name="field_postage" class="inputConts5 taR" value="0">
188</p>
189</div>
190<div class="cf totalFee">
191<p class="flL totalTxt mt5">合計<span class="zei">（税込）</span></p>
192<p class="flR price w40p taR fz22" nome="total_price">￥
193<input type="text" name="field_total2" class="inputConts5 afmred taR fz24" value="0">
194</p>
195</div>
196</div>
197</div>
198