質問編集履歴
2
誤表記の修正をしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -74,11 +74,11 @@
|
|
|
74
74
|
|
|
75
75
|
<select class="parent" id="size01" name="size01" disabled required>
|
|
76
76
|
|
|
77
|
-
<option value="" class="msg" disabled selected>
|
|
77
|
+
<option value="" class="msg" disabled selected>サイズを選択</option>
|
|
78
|
-
|
|
78
|
+
|
|
79
|
-
<option value="S">S：
|
|
79
|
+
<option value="S">S：600円</option>
|
|
80
|
-
|
|
80
|
+
|
|
81
|
-
<option value="
|
|
81
|
+
<option value="L">L：900円</option>
|
|
82
82
|
|
|
83
83
|
</select>
|
|
84
84
|
|
|
@@ -114,11 +114,11 @@
|
|
|
114
114
|
|
|
115
115
|
<select class="parent" id="size02" name="size02" disabled required>
|
|
116
116
|
|
|
117
|
-
<option value="" class="msg" disabled selected>
|
|
117
|
+
<option value="" class="msg" disabled selected>サイズを選択</option>
|
|
118
|
-
|
|
118
|
+
|
|
119
|
-
<option value="S">S：
|
|
119
|
+
<option value="S">S：600円</option>
|
|
120
|
-
|
|
120
|
+
|
|
121
|
-
<option value="
|
|
121
|
+
<option value="L">L：900円</option>
|
|
122
122
|
|
|
123
123
|
</select>
|
|
124
124
|
|
1
JavaScriptコードを記載しました。試したことも追加致しましたが、結局１つの値に対しての集計で、単価も振り分け出来ていません。よろしくお願いします。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,157 +1,303 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
メールフォームで商品の予約フォームを作っています。
|
|
6
|
+
|
|
7
|
+
サイズ違いで 2種類の価格があり、
|
|
8
|
+
|
|
9
|
+
商品の色ごとにそれぞれ注文できるフォームです。
|
|
10
|
+
|
|
11
|
+
色が違っても価格はサイズ共通です。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
例）
|
|
16
|
+
|
|
17
|
+
色：赤 サイズ：S / L 数量：1〜4
|
|
18
|
+
|
|
19
|
+
色：青 サイズ：S / L 数量：1〜4
|
|
20
|
+
|
|
21
|
+
色：黄 サイズ：S / L 数量：1〜4
|
|
22
|
+
|
|
23
|
+
色：緑 サイズ：S / L 数量：1〜4
|
|
24
|
+
|
|
25
|
+
色：紫 サイズ：S / L 数量：1〜4
|
|
26
|
+
|
|
27
|
+
色：黒 サイズ：S / L 数量：1〜4
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
色はチェックボックスで選び、
|
|
32
|
+
|
|
33
|
+
サイズ、数量は、セレクトボックスで選ぶようにしています。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
最終的に下記のように表示させたいです。
|
|
38
|
+
|
|
39
|
+
Sサイズ：合計▲▲枚 × 600円 ＝ ▲,▲▲▲円
|
|
40
|
+
|
|
41
|
+
Lサイズ：合計▲▲枚 × 900円 ＝ ▲,▲▲▲円
|
|
42
|
+
|
|
43
|
+
送料：500円
|
|
44
|
+
|
|
45
|
+
合計 ▲,▲▲▲円
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
### 発生している問題・エラーメッセージ
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
商品の合計数と合計金額をサイズごとに集計して表示したいのですが、
|
|
56
|
+
|
|
57
|
+
Sサイズ / Lサイズ の金額の振り分けができません。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### 該当のソースコード
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
|
|
67
|
+
<label class="color">
|
|
68
|
+
|
|
69
|
+
<input type="checkbox" name="color" value="color01 on" onclick="connecttext('size01',this.checked);">
|
|
70
|
+
|
|
71
|
+
赤
|
|
72
|
+
|
|
73
|
+
</label>
|
|
74
|
+
|
|
75
|
+
<select class="parent" id="size01" name="size01" disabled required>
|
|
76
|
+
|
|
77
|
+
<option value="" class="msg" disabled selected>色を選択</option>
|
|
78
|
+
|
|
79
|
+
<option value="S">S：9,000円</option>
|
|
80
|
+
|
|
81
|
+
<option value="A">L：6,000円</option>
|
|
82
|
+
|
|
83
|
+
</select>
|
|
84
|
+
|
|
85
|
+
<select class="children" id="number01" name="number01" disabled required>
|
|
86
|
+
|
|
87
|
+
<option value="0" class="msg" selected>0</option>
|
|
88
|
+
|
|
89
|
+
<option value="1" data-val="S">1</option>
|
|
90
|
+
|
|
91
|
+
<option value="2" data-val="S">2</option>
|
|
92
|
+
|
|
93
|
+
<option value="3" data-val="S">3</option>
|
|
94
|
+
|
|
95
|
+
<option value="4" data-val="S">4</option>
|
|
96
|
+
|
|
97
|
+
<option value="1" data-val="L">1</option>
|
|
98
|
+
|
|
99
|
+
<option value="2" data-val="L">2</option>
|
|
100
|
+
|
|
101
|
+
<option value="3" data-val="L">3</option>
|
|
102
|
+
|
|
103
|
+
<option value="4" data-val="L">4</option>
|
|
104
|
+
|
|
105
|
+
</select>
|
|
106
|
+
|
|
107
|
+
<label class="color">
|
|
108
|
+
|
|
109
|
+
<input type="checkbox" name="color" value="color01 on" onclick="connecttext('size02',this.checked);">
|
|
110
|
+
|
|
111
|
+
青
|
|
112
|
+
|
|
113
|
+
</label>
|
|
114
|
+
|
|
115
|
+
<select class="parent" id="size02" name="size02" disabled required>
|
|
116
|
+
|
|
117
|
+
<option value="" class="msg" disabled selected>色を選択</option>
|
|
118
|
+
|
|
119
|
+
<option value="S">S：9,000円</option>
|
|
120
|
+
|
|
121
|
+
<option value="A">L：6,000円</option>
|
|
122
|
+
|
|
123
|
+
</select>
|
|
124
|
+
|
|
125
|
+
<select class="children" id="number02" name="number02" disabled required>
|
|
126
|
+
|
|
127
|
+
<option value="0" class="msg" selected>0</option>
|
|
128
|
+
|
|
129
|
+
<option value="1" data-val="S">1</option>
|
|
130
|
+
|
|
131
|
+
<option value="2" data-val="S">2</option>
|
|
132
|
+
|
|
133
|
+
<option value="3" data-val="S">3</option>
|
|
134
|
+
|
|
135
|
+
<option value="4" data-val="S">4</option>
|
|
136
|
+
|
|
137
|
+
<option value="1" data-val="L">1</option>
|
|
138
|
+
|
|
139
|
+
<option value="2" data-val="L">2</option>
|
|
140
|
+
|
|
141
|
+
<option value="3" data-val="L">3</option>
|
|
142
|
+
|
|
143
|
+
<option value="4" data-val="L">4</option>
|
|
144
|
+
|
|
145
|
+
</select>
|
|
146
|
+
|
|
147
|
+
（残り4種類同様です）
|
|
148
|
+
|
|
3
149
|
```
|
|
4
150
|
|
|
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
|
-
|
|
151
|
+
```js
|
|
152
|
+
|
|
153
|
+
$(function() {
|
|
154
|
+
|
|
155
|
+
//セレクトボックスが切り替わったら発動
|
|
156
|
+
|
|
157
|
+
$('select#number').change(function() {
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
//選択したvalue値を変数に格納
|
|
162
|
+
|
|
163
|
+
var val = $(this).val();
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
//選択したvalue値をp要素に出力
|
|
168
|
+
|
|
169
|
+
$('p#fee').text(val);
|
|
170
|
+
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
$(function() {
|
|
176
|
+
|
|
177
|
+
var $children = $('.children');
|
|
178
|
+
|
|
179
|
+
var original = $children.html();
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
$('.parent').change(function() {
|
|
184
|
+
|
|
185
|
+
var val1 = $(this).val();
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
$children.html(original).find('option').each(function() {
|
|
190
|
+
|
|
191
|
+
var val2 = $(this).data('val');
|
|
192
|
+
|
|
193
|
+
if (val1 != val2) {
|
|
194
|
+
|
|
195
|
+
$(this).not('optgroup,.msg').remove();
|
|
196
|
+
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
if ($(this).val() === '') {
|
|
204
|
+
|
|
205
|
+
$children.attr('disabled', 'disabled');
|
|
206
|
+
|
|
207
|
+
} else {
|
|
208
|
+
|
|
209
|
+
$children.removeAttr('disabled');
|
|
210
|
+
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
});
|
|
216
|
+
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
function connecttext( textid, ischecked ) {
|
|
220
|
+
|
|
221
|
+
// チェック状態に合わせて有効・無効を切り替える
|
|
222
|
+
|
|
223
|
+
document.getElementById(textid).disabled = !ischecked;
|
|
224
|
+
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
$("input[type=checkbox]").click(function(){
|
|
228
|
+
|
|
229
|
+
var $count = $("input[type=checkbox]:checked").length;
|
|
230
|
+
|
|
231
|
+
var $not = $('input[type=checkbox]').not(':checked')
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
//チェックが3つ付いたら、チェックされてないチェックボックスにdisabledを加える
|
|
236
|
+
|
|
237
|
+
if($count >= 10) {
|
|
238
|
+
|
|
239
|
+
$not.attr("disabled",true);
|
|
240
|
+
|
|
241
|
+
}else{
|
|
242
|
+
|
|
243
|
+
//3つ以下ならisabledを外す
|
|
244
|
+
|
|
245
|
+
$not.attr("disabled",false);
|
|
246
|
+
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
});
|
|
46
250
|
|
|
47
251
|
```
|
|
48
252
|
|
|
49
253
|
|
|
50
254
|
|
|
255
|
+
### 試したこと
|
|
256
|
+
|
|
257
|
+
```js
|
|
258
|
+
|
|
259
|
+
$(function(){
|
|
260
|
+
|
|
261
|
+
var value = 900;
|
|
262
|
+
|
|
263
|
+
var maxNum = 4;
|
|
264
|
+
|
|
265
|
+
var tagInput = $('#number01');
|
|
266
|
+
|
|
267
|
+
var tagOutput = $('#jsPrice');
|
|
268
|
+
|
|
269
|
+
tagInput.on('change', function() {
|
|
270
|
+
|
|
271
|
+
var str = $(this).val();
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
if(num == 0) {
|
|
276
|
+
|
|
51
|
-
|
|
277
|
+
num = '';
|
|
278
|
+
|
|
279
|
+
} else if (num > maxNum) {
|
|
280
|
+
|
|
281
|
+
num = maxNum;
|
|
282
|
+
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
$(this).val(num);
|
|
286
|
+
|
|
287
|
+
if(num != 0) {
|
|
288
|
+
|
|
289
|
+
var price = num * value;
|
|
290
|
+
|
|
291
|
+
tagOutput.val(price);
|
|
292
|
+
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
});
|
|
296
|
+
|
|
297
|
+
});
|
|
52
298
|
|
|
53
299
|
```
|
|
54
300
|
|
|
55
|
-
商品の合計数と合計金額をサイズごとに集計して表示したいのですが、
|
|
56
|
-
|
|
57
|
-
Sサイズ / Lサイズ の金額の振り分けができません。
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### 該当のソースコード
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
|
|
67
|
-
<label class="color">
|
|
68
|
-
|
|
69
|
-
<input type="checkbox" name="color" value="color01 on" onclick="connecttext('size01',this.checked);">
|
|
70
|
-
|
|
71
|
-
赤
|
|
72
|
-
|
|
73
|
-
</label>
|
|
74
|
-
|
|
75
|
-
<select class="parent" id="size01" name="size01" disabled required>
|
|
76
|
-
|
|
77
|
-
<option value="" class="msg" disabled selected>色を選択</option>
|
|
78
|
-
|
|
79
|
-
<option value="S">S：9,000円</option>
|
|
80
|
-
|
|
81
|
-
<option value="A">L：6,000円</option>
|
|
82
|
-
|
|
83
|
-
</select>
|
|
84
|
-
|
|
85
|
-
<select class="children" id="number01" name="number01" disabled required>
|
|
86
|
-
|
|
87
|
-
<option value="0" class="msg" selected>0</option>
|
|
88
|
-
|
|
89
|
-
<option value="1" data-val="S">1</option>
|
|
90
|
-
|
|
91
|
-
<option value="2" data-val="S">2</option>
|
|
92
|
-
|
|
93
|
-
<option value="3" data-val="S">3</option>
|
|
94
|
-
|
|
95
|
-
<option value="4" data-val="S">4</option>
|
|
96
|
-
|
|
97
|
-
<option value="1" data-val="A">1</option>
|
|
98
|
-
|
|
99
|
-
<option value="2" data-val="A">2</option>
|
|
100
|
-
|
|
101
|
-
<option value="3" data-val="A">3</option>
|
|
102
|
-
|
|
103
|
-
<option value="4" data-val="A">4</option>
|
|
104
|
-
|
|
105
|
-
</select>
|
|
106
|
-
|
|
107
|
-
<label class="color">
|
|
108
|
-
|
|
109
|
-
<input type="checkbox" name="color" value="color01 on" onclick="connecttext('size02',this.checked);">
|
|
110
|
-
|
|
111
|
-
青
|
|
112
|
-
|
|
113
|
-
</label>
|
|
114
|
-
|
|
115
|
-
<select class="parent" id="size02" name="size02" disabled required>
|
|
116
|
-
|
|
117
|
-
<option value="" class="msg" disabled selected>色を選択</option>
|
|
118
|
-
|
|
119
|
-
<option value="S">S：9,000円</option>
|
|
120
|
-
|
|
121
|
-
<option value="A">L：6,000円</option>
|
|
122
|
-
|
|
123
|
-
</select>
|
|
124
|
-
|
|
125
|
-
<select class="children" id="number02" name="number02" disabled required>
|
|
126
|
-
|
|
127
|
-
<option value="0" class="msg" selected>0</option>
|
|
128
|
-
|
|
129
|
-
<option value="1" data-val="S">1</option>
|
|
130
|
-
|
|
131
|
-
<option value="2" data-val="S">2</option>
|
|
132
|
-
|
|
133
|
-
<option value="3" data-val="S">3</option>
|
|
134
|
-
|
|
135
|
-
<option value="4" data-val="S">4</option>
|
|
136
|
-
|
|
137
|
-
<option value="1" data-val="A">1</option>
|
|
138
|
-
|
|
139
|
-
<option value="2" data-val="A">2</option>
|
|
140
|
-
|
|
141
|
-
<option value="3" data-val="A">3</option>
|
|
142
|
-
|
|
143
|
-
<option value="4" data-val="A">4</option>
|
|
144
|
-
|
|
145
|
-
</select>
|
|
146
|
-
|
|
147
|
-
（残り4種類同様です）
|
|
148
|
-
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
301
|
|
|
156
302
|
|
|
157
303
|
### 補足情報
|