teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2018/05/17 05:33

投稿

yambejp
yambejp

スコア117921

answer CHANGED
@@ -2,4 +2,112 @@
2
2
  radioボタンのnameが競合してただしく選択できません
3
3
 
4
4
  priceとfieldを多用していますが、
5
- たとえば各要素にidをふるなどもう少し工夫が必要かと
5
+ たとえば各要素にidをふるなどもう少し工夫が必要かと
6
+
7
+ # sample
8
+
9
+ 最大限元のHTMLを優先してみました
10
+
11
+ ```javascript
12
+ <script>
13
+ document.addEventListener('change',function(e){
14
+ var p=document.querySelectorAll('input[name=price]');
15
+ var f=document.querySelectorAll('input[name=field]');
16
+ var w=document.querySelectorAll('input[type=radio].which:checked');
17
+ var c=document.querySelectorAll('select[name=count]');
18
+ var t=document.querySelectorAll('input[name=field_total]');
19
+ var ta=document.querySelector('input[name=allTotal]');
20
+ var t0=0,t1=0;
21
+ var v=0;
22
+ for(var i=0;i<3;i++){
23
+ t0+=(v=parseInt(p[i].value)||0*parseInt(w[i].value||0));
24
+ f[i].value=p[i].value==""?"":v;
25
+ t1+=(v=parseInt(p[i+3].value||0)*parseInt(c[i].value||0));
26
+ f[i+3].value=p[i+3].value==""?"":v;
27
+ }
28
+ t[0].value=t0;
29
+ t[1].value=t1;
30
+ ta.value=t0+t1;
31
+ });
32
+ </script>
33
+ <form id="form">
34
+ <table>
35
+ <tr>
36
+ <th>単価</th>
37
+ <th>利用区分</th>
38
+ <th>合計</th>
39
+ </tr>
40
+ <tr>
41
+ <td><input maxlength='6' type="text" name="price"></td>
42
+ <td><label><input type="radio" class="which" name="which_1" value="1" checked>片道
43
+ <input type="radio" class="which" name="which_1" value="2">往復</label></td>
44
+ <td><input maxlength='7' type="text" name="field"></td>
45
+ </tr>
46
+ <tr>
47
+ <td><input maxlength='6' type="text" name="price"></td>
48
+ <td><label><input type="radio" class="which" name="which_2" value="1" checked>片道
49
+ <input type="radio" class="which" name="which_2" value="2">往復</label></td>
50
+ <td><input maxlength='7' type="text" name="field"></td>
51
+ </tr>
52
+ <tr>
53
+ <td><input maxlength='6' type="text" name="price"></td>
54
+ <td><label><input type="radio" class="which" name="which_3" value="1" checked>片道
55
+ <input type="radio" class="which" name="which_3" value="2">往復</label></td>
56
+ <td><input maxlength='7' type="text" name="field"></td>
57
+ </tr>
58
+ <tr>
59
+ <td align="right" colspan="3">合計</td>
60
+ <td><input type="text" name="field_total" value="0"></td>
61
+ </tr>
62
+ </table>
63
+ <table>
64
+ <tr>
65
+ <th>単価</th>
66
+ <th>数量</th>
67
+ <th>合計</th>
68
+ </tr>
69
+ <tr>
70
+ <td><input maxlength='6' type="text" name="price"></td>
71
+ <td class="left">
72
+ <select name="count">
73
+ <?php
74
+ $price=[0,1,2,3,4,5,6,7,8,9,10];
75
+ foreach($price as $item) {
76
+ echo '<option value="', $item ,'">', $item ,'</option>';}
77
+ ?>
78
+ </select></td>
79
+ <td><input maxlength='7' type="text" name="field"></td>
80
+ </tr>
81
+ <tr>
82
+ <td><input maxlength='6' type="text" name="price"></td>
83
+ <td class="left">
84
+ <select name="count">
85
+ <?php
86
+ $price=[0,1,2,3,4,5,6,7,8,9,10];
87
+ foreach($price as $item) {
88
+ echo '<option value="', $item ,'">', $item ,'</option>';}
89
+ ?>
90
+ </select></td>
91
+ <td><input maxlength='7' type="text" name="field"></td>
92
+ </tr>
93
+ <tr>
94
+ <td><input maxlength='6' type="text" name="price"></td>
95
+ <td class="left">
96
+ <select name="count">
97
+ <?php
98
+ $price=[0,1,2,3,4,5,6,7,8,9,10];
99
+ foreach($price as $item) {
100
+ echo '<option value="', $item ,'">', $item ,'</option>';}
101
+ ?>
102
+ </select></td>
103
+ <td><input maxlength='7' type="text" name="field"></td>
104
+ </tr>
105
+ <tr>
106
+ <td align="right" colspan="3">合計</td>
107
+ <td><input type="text" name="field_total" value="0"></td>
108
+ </tr>
109
+ </table>
110
+ <label>総合計</label>
111
+ <input type="text" name="allTotal">
112
+ </body>
113
+ ```