teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問checkboxとradioboxを同等に扱いたい場合：

編集履歴

回答編集履歴

3

chousei

2019/06/07 04:17

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -14,21 +14,23 @@
14
14
 
15
15
  あとは技得点とかグループ得点とか計算根拠を提示してください
16
16
 
17
+
18
+
19
+ group3(ラジオ版)を追記
20
+
17
21
  ```javascript
18
-
19
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
20
22
 
21
23
  <script>
22
24
 
23
25
  $(function(){
24
26
 
25
- $('.group :checkbox').on('change',function(){
27
+ $('.group .G').on('change',function(){
26
28
 
27
29
  var sum=parseInt($(this).closest('.group').find('.G:checked').map(function(){
28
30
 
29
31
  return parseFloat($(this).val());
30
32
 
31
- }).get().reduce(function(x,y){
33
+ }).get().concat([0]).reduce(function(x,y){
32
34
 
33
35
  return x+y;
34
36
 
@@ -52,7 +54,7 @@
52
54
 
53
55
  <table border>
54
56
 
55
- <tr><th colspan="6"><input type = "checkbox" class="G1" value = "0.5" id="G1">グループⅠ</th></tr>
57
+ <tr><th colspan="6"><input type = "checkbox" class="G" value = "0.5" >グループ1</th></tr>
56
58
 
57
59
  <tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr>
58
60
 
@@ -72,7 +74,7 @@
72
74
 
73
75
  </tr>
74
76
 
75
- <tr><td colspan="6" align="center">合計点：<span class="total">0</span>点</td></tr>
77
+ <tr><td colspan="6">合計点：<span class="total">0</span>点</td></tr>
76
78
 
77
79
  </table>
78
80
 
@@ -82,7 +84,7 @@
82
84
 
83
85
  <table border>
84
86
 
85
- <tr><th colspan="6"><input type = "checkbox" class="G2" value = "0.5" id="G2">グループⅡ</th></tr>
87
+ <tr><th colspan="6"><input type = "checkbox" class="G" value = "0.5">グループ2</th></tr>
86
88
 
87
89
  <tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr>
88
90
 
@@ -104,7 +106,7 @@
104
106
 
105
107
  <tr>
106
108
 
107
- <td colspan="6" align="center">合計点：<span class="total">0</span>点</td>
109
+ <td colspan="6">合計点：<span class="total">0</span>点</td>
108
110
 
109
111
  </tr>
110
112
 
@@ -112,4 +114,42 @@
112
114
 
113
115
  </div>
114
116
 
117
+ <div class= "group">
118
+
119
+ <table border>
120
+
121
+ <tr><th colspan="6"><input type = "radio" class="G" value = "0.5">グループ3</th></tr>
122
+
123
+ <tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr>
124
+
125
+ <tr align="center">
126
+
127
+ <td><label><input type="radio" class="G" value="0.1">前宙</label></td>
128
+
129
+ <td><label><input type="radio" class="G" value="0.2">前宙</label></td>
130
+
131
+ <td><label><input type="radio" class="G" value="0.3">前宙</label></td>
132
+
133
+ <td><label><input type="radio" class="G" value="0.4">前宙</label></td>
134
+
135
+ <td><label><input type="radio" class="G" value="0.5">前宙</label></td>
136
+
137
+ <td><label><input type="radio" class="G" value="0.6">前宙</label></td>
138
+
139
+ </tr>
140
+
141
+ <tr>
142
+
143
+ <td colspan="6">合計点：<span class="total">0</span>点</td>
144
+
145
+ </tr>
146
+
147
+ </table>
148
+
149
+ </div>
150
+
151
+
152
+
153
+
154
+
115
155
  ```

2

chousei

2019/06/07 04:17

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -3,3 +3,113 @@
3
3
 
4
4
 
5
5
  もしかして同じページ内に同じidが存在してはいけないルールを理解されていませんか？
6
+
7
+
8
+
9
+
10
+
11
+ # sample
12
+
13
+ とりあえず共通化できるものはまとめました。
14
+
15
+ あとは技得点とかグループ得点とか計算根拠を提示してください
16
+
17
+ ```javascript
18
+
19
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
20
+
21
+ <script>
22
+
23
+ $(function(){
24
+
25
+ $('.group :checkbox').on('change',function(){
26
+
27
+ var sum=parseInt($(this).closest('.group').find('.G:checked').map(function(){
28
+
29
+ return parseFloat($(this).val());
30
+
31
+ }).get().reduce(function(x,y){
32
+
33
+ return x+y;
34
+
35
+ })*10)/10;
36
+
37
+ $(this).closest('.group').find('.total').text(sum);
38
+
39
+ });
40
+
41
+ });
42
+
43
+ </script>
44
+
45
+ <h1>合計得点：<span id="all_total">0</span>点 </h1>
46
+
47
+ <h2>技得点：<span id="waza_total">0</span>点 </h2>
48
+
49
+ <h2>グループ得点：<span id="group_total">0</span>点 </h2>
50
+
51
+ <div class= "group">
52
+
53
+ <table border>
54
+
55
+ <tr><th colspan="6"><input type = "checkbox" class="G1" value = "0.5" id="G1">グループⅠ</th></tr>
56
+
57
+ <tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr>
58
+
59
+ <tr>
60
+
61
+ <td><label><input type="checkbox" class="G" value="0.1">後振り上がり倒立</label></td>
62
+
63
+ <td><label><input type="checkbox" class="G" value="0.2">片逆手後ろ振り上がり一回ひねり(片逆手)倒立</label></td>
64
+
65
+ <td><input type="checkbox" class="G" value="0.3"></td>
66
+
67
+ <td><input type="checkbox" class="G" value="0.4"></td>
68
+
69
+ <td><input type="checkbox" class="G" value="0.5"></td>
70
+
71
+ <td><input type="checkbox" class="G" value="0.6"></td>
72
+
73
+ </tr>
74
+
75
+ <tr><td colspan="6" align="center">合計点：<span class="total">0</span>点</td></tr>
76
+
77
+ </table>
78
+
79
+ </div>
80
+
81
+ <div class= "group">
82
+
83
+ <table border>
84
+
85
+ <tr><th colspan="6"><input type = "checkbox" class="G2" value = "0.5" id="G2">グループⅡ</th></tr>
86
+
87
+ <tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr>
88
+
89
+ <tr align="center">
90
+
91
+ <td><label><input type="checkbox" class="G" value="0.1">前宙</label></td>
92
+
93
+ <td><label><input type="checkbox" class="G" value="0.2">前宙</label></td>
94
+
95
+ <td><label><input type="checkbox" class="G" value="0.3">前宙</label></td>
96
+
97
+ <td><label><input type="checkbox" class="G" value="0.4">前宙</label></td>
98
+
99
+ <td><label><input type="checkbox" class="G" value="0.5">前宙</label></td>
100
+
101
+ <td><label><input type="checkbox" class="G" value="0.6">前宙</label></td>
102
+
103
+ </tr>
104
+
105
+ <tr>
106
+
107
+ <td colspan="6" align="center">合計点：<span class="total">0</span>点</td>
108
+
109
+ </tr>
110
+
111
+ </table>
112
+
113
+ </div>
114
+
115
+ ```

1

chousei

2019/06/07 02:34

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -1 +1,5 @@
1
1
  [前回](https://teratail.com/questions/192399#reply-285432)もお伝えしたとおりidが競合しているのでその修正から
2
+
3
+
4
+
5
+ もしかして同じページ内に同じidが存在してはいけないルールを理解されていませんか？