Q&A
type=radioは正確にはボックスではなくボタンです（ラジオボタン）
決まっているものなので表現改めてもらえればと。
各表のチェックボックスを選べばその合計点が技得点に加算され、グループⅠ〜Ⅱの中で一つでも技が選択されていれば１グループにつき0.5点をグループ得点に加算し、グループ得点と技得点の合計を一番上の合計得点に表示するという機能を付けています。しかしグループⅢは
・一つの技しか選択できない
・グループ得点はA難度を選べば0.1点、B難度なら0.2点、C難度なら0.3点、D難度以上なら0.5点をグループ得点に加算する
・技得点は他のグループと同様に技得点に加算する
という機能を持たせるため、チェックボックスではなく、ラヂオボックスにして上記のコードにグループⅢを追加して以下のコードを書きました。しかし確認すると動きませんでした。チェックボックスとラヂオボックスを同様に扱っていることが問題なのでしょうか。どなたか解決策ご存知の方いらっしゃいましたら是非教えて下さい。
HTML
1<!DOCTYPE html> 2<html="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="floor3.css"> 6 <title>floor Dscore</title> 7 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 8 <script> 9 $(function() { 10 11 function calc_group_score(num1,num2){ 12 var sum_g_point=0; 13 if(num1 != 0){ 14 sum_g_point += 0.5; 15 } 16 if(num2 != 0){ 17 sum_g_point += 0.5; 18 } 19 20 } 21 console.log('グループ得点：'+sum_g_point); 22 return sum_g_point; 23 } 24 25 function calc_waza_score(num1,num2){ 26 var sum_point=0; 27 sum_point = Math.round(10 * (num1 + num2)) / 10; 28 console.log('技得点：'+sum_point); 29 return sum_point; 30 } 31 32 function calc_total_score(num1,num2){ 33 var total_point = 0; 34 total_point = num1 + num2; 35 console.log('合計得点：'+total_point); 36 return total_point; 37 } 38 39 var sum_scores1 = () => 40 $('input[type="checkbox"].G1:checked') 41 .map((_, e) => +e.value) 42 .get() 43 .reduce((sum, e) => sum + e, 0); 44 45 var sum_scores2 = () => 46 $('input[type="checkbox"].G2:checked') 47 .map((_, e) => +e.value) 48 .get() 49 .reduce((sum, e) => sum + e, 0); 50 51 $('input[type="checkbox"]').change(function () { 52 53 54 var group_point = calc_group_score(sum_scores1(),sum_scores2()); 55 console.log(group_point); 56 $('#group_total').text(group_point); 57 var waza_point = calc_waza_score(sum_scores1(),sum_scores2()); 58 console.log(waza_point); 59 $('#waza_total').text(waza_point); 60 var total = calc_total_score(group_point, waza_point) 61 console.log(total); 62 $('#all_total').text(total); 63 }); 64 65 $('input[type=checkbox].G1').change(function () { 66 $('#total_1').text(Math.round(10 * sum_scores1()) / 10); 67 }); 68 $('input[type=checkbox].G2').change(function () { 69 $('#total_2').text(Math.round(10 * sum_scores2()) / 10); 70 }); 71 }); 72 </script> 73</head> 74<body> 75 <h1>合計得点：<span id="all_total">0</span>点 </h1> 76 <h2>技得点：<span id="waza_total">0</span>点 </h2> 77 <h2>グループ得点：<span id="group_total">0</span>点 </h2> 78 <div class= "group1"> 79 <table border="" width="840px" height="700"> 80 <tr><th colspan=6 height="10%"><input type = "checkbox" class="G1" value = "0.5" id="G1">グループⅠ</th></tr> 81 <tr width="16%" height="10%"> 82 <th>A難度</th><th>B難度</th><th>C難度</th><th> 83 D難度</th><th>E難度</th><th>F難度</th> 84 </tr> 85 <tr align="center"> 86 <td> 87 <input type="checkbox" class="G1" value="0.1" id="g1" /><label for="g1">後振り上がり倒立</label> 88 </td> 89 <td> 90 <input type="checkbox" class="G1" value="0.2" id="g2" /><label for="g2">片逆手後ろ振り上がり一回ひねり(片逆手)倒立</label> 91 </td> 92 <td> 93 <input type="checkbox" class="G1" value="0.3" id="g3" /><label for="g3"></label> 94 </td> 95 <td> 96 <input type="checkbox" class="G1" value="0.4" id="g4" /><label for="g4"></label> 97 </td> 98 <td> 99 <input type="checkbox" class="G1" value="0.5" id="g5" /><label for="g5"></label> 100 </td> 101 <td> 102 <input type="checkbox" class="G1" value="0.6" id="g6" /><label for="g6"></label> 103 </td> 104 </tr> 105 106 <tr> 107 <td colspan="6" align="center"> 108 合計点：<span id="total_1">0</span>点 109 </td> 110 </tr> 111 </table> 112</div> 113 114<div class= "group2"> 115 <table border="" width="840px" height="700"> 116 <tr><th colspan=6 height="10%"><input type = "checkbox" class="G2" value = "0.5" id="G2">グループⅡ</th></tr> 117 <tr width="16%" height="10%"> 118 <th>A難度</th><th>B難度</th><th>C難度</th><th> 119 D難度</th><th>E難度</th><th>F難度</th> 120 </tr> 121 <tr align="center"> 122 <td> 123 <input type="checkbox" class="G2" value="0.1" id="g7" /><label for="g7">前宙</label> 124 </td> 125 <td> 126 <input type="checkbox" class="G2" value="0.2" id="g8" /><label for="g8">前宙</label> 127 </td> 128 <td> 129 <input type="checkbox" class="G2" value="0.3" id="g9" /><label for="g9">前宙</label> 130 </td> 131 <td> 132 <input type="checkbox" class="G2" value="0.4" id="g10" /><label for="g10">前宙</label> 133 </td> 134 <td> 135 <input type="checkbox" class="G2" value="0.5" id="g11" /><label for="g11">前宙</label> 136 </td> 137 <td> 138 <input type="checkbox" class="G2" value="0.6" id="g12" /><label for="g12">前宙</label> 139 </td> 140 </tr> 141 142 <tr> 143 <td colspan="6" align="center"> 144 合計点：<span id="total_2">0</span>点 145 </td> 146 </tr> 147 </table> 148</div> 149</table> 150</div> 151 152<script="script.js"></script> 153</body> 154</html> 155 156 157```HTML 158コード 159```<!DOCTYPE html> 160<html="ja"> 161<head> 162 <meta charset="utf-8"> 163 <link rel="stylesheet" href="floor3.css"> 164 <title>floor Dscore</title> 165 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 166 <script> 167 $(function() { 168 169 function calc_group_score(num1,num2,num3,){ 170 var sum_g_point=0; 171 if(num1 != 0){ 172 sum_g_point += 0.5; 173 } 174 if(num2 != 0){ 175 sum_g_point += 0.5; 176 } 177 178 if(num3 = 0.1){ 179 sum_g_point += 0.1; 180 } 181 if(num3 = 0.2){ 182 sum_g_point += 0.2; 183 } 184 if(num3 = 0.3){ 185 sum_g_point += 0.3; 186 } 187 if(num3 >= 0.4){ 188 sum_g_point += 0.5; 189 } 190 191 console.log('グループ得点：'+sum_g_point); 192 return sum_g_point; 193 } 194 195 function calc_waza_score(num1,num2,num3){ 196 var sum_point=0; 197 sum_point = Math.round(10 * (num1 + num2 + num3 )) / 10; 198 console.log('技得点：'+sum_point); 199 return sum_point; 200 } 201 202 function calc_total_score(num1,num2){ 203 var total_point = 0; 204 total_point = num1 + num2; 205 console.log('合計得点：'+total_point); 206 return total_point; 207 } 208 209 var sum_scores1 = () => 210 $('input[type="checkbox"].G1:checked') 211 .map((_, e) => +e.value) 212 .get() 213 .reduce((sum, e) => sum + e, 0); 214 215 var sum_scores2 = () => 216 $('input[type="checkbox"].G2:checked') 217 .map((_, e) => +e.value) 218 .get() 219 .reduce((sum, e) => sum + e, 0); 220 221 222 223 var sum_scores3 = () => 224 $('input[type="radio"].G3:checked') 225 .map((_, e) => +e.value) 226 .get() 227 .reduce((sum, e) => sum + e, 0); 228 $('input[type="checkbox"]','input[type="radio"]').change(function () { 229 var group_point = calc_group_score(sum_scores1(),sum_scores2(),sum_scores3()); 230 console.log(group_point); 231 $('#group_total').text(group_point); 232 var waza_point = calc_waza_score(sum_scores1(),sum_scores2(),sum_scores3()); 233 console.log(waza_point); 234 $('#waza_total').text(waza_point); 235 var total = calc_total_score(group_point, waza_point) 236 console.log(total); 237 $('#all_total').text(total); 238 }); 239 240 $('input[type=checkbox].G1').change(function () { 241 $('#total_1').text(Math.round(10 * sum_scores1()) / 10); 242 }); 243 $('input[type=checkbox].G2').change(function () { 244 $('#total_2').text(Math.round(10 * sum_scores2()) / 10); 245 }); 246 $('input[type=radio].G3').change(function () { 247 $('#total_3').text(Math.round(10 * sum_scores3()) / 10); 248 }); 249 250 251 }); 252 </script> 253</head> 254 255</body> 256</html> 257
回答2件
0
ベストアンサー
yambejpさんがおっしゃっている通り、classは同じWebページ内で同じものを何個も持てますが、idに関しては重複してはいけないというルールがあります。
下記参考に、一度修正してしてみたはいかがでしょうか！
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id
投稿2019/06/07 00:27
編集2019/06/07 01:17
総合スコア679
紹介するのであれば嘘を書いている可能性もある個人ブログより、より公式にリファレンスのほうが良いかと。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id
確かにそうですね…！
ご指摘ありがとうございます。
気をつけます！
回答修正されたほうが良いです。
0
前回もお伝えしたとおりidが競合しているのでその修正から
もしかして同じページ内に同じidが存在してはいけないルールを理解されていませんか？
sample
とりあえず共通化できるものはまとめました。
あとは技得点とかグループ得点とか計算根拠を提示してください
group3(ラジオ版)を追記
javascript
1<script> 2$(function(){ 3 $('.group .G').on('change',function(){ 4 var sum=parseInt($(this).closest('.group').find('.G:checked').map(function(){ 5 return parseFloat($(this).val()); 6 }).get().concat([0]).reduce(function(x,y){ 7 return x+y; 8 })*10)/10; 9 $(this).closest('.group').find('.total').text(sum); 10 }); 11}); 12</script> 13<h1>合計得点：<span id="all_total">0</span>点 </h1> 14<h2>技得点：<span id="waza_total">0</span>点 </h2> 15<h2>グループ得点：<span id="group_total">0</span>点 </h2> 16<div class= "group"> 17<table border> 18<tr><th colspan="6"><input type = "checkbox" class="G" value = "0.5" >グループ1</th></tr> 19<tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr> 20<tr> 21<td><label><input type="checkbox" class="G" value="0.1">後振り上がり倒立</label></td> 22<td><label><input type="checkbox" class="G" value="0.2">片逆手後ろ振り上がり一回ひねり(片逆手)倒立</label></td> 23<td><input type="checkbox" class="G" value="0.3"></td> 24<td><input type="checkbox" class="G" value="0.4"></td> 25<td><input type="checkbox" class="G" value="0.5"></td> 26<td><input type="checkbox" class="G" value="0.6"></td> 27</tr> 28<tr><td colspan="6">合計点：<span class="total">0</span>点</td></tr> 29</table> 30</div> 31<div class= "group"> 32<table border> 33<tr><th colspan="6"><input type = "checkbox" class="G" value = "0.5">グループ2</th></tr> 34<tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr> 35<tr align="center"> 36<td><label><input type="checkbox" class="G" value="0.1">前宙</label></td> 37<td><label><input type="checkbox" class="G" value="0.2">前宙</label></td> 38<td><label><input type="checkbox" class="G" value="0.3">前宙</label></td> 39<td><label><input type="checkbox" class="G" value="0.4">前宙</label></td> 40<td><label><input type="checkbox" class="G" value="0.5">前宙</label></td> 41<td><label><input type="checkbox" class="G" value="0.6">前宙</label></td> 42</tr> 43<tr> 44<td colspan="6">合計点：<span class="total">0</span>点</td> 45</tr> 46</table> 47</div> 48<div class= "group"> 49<table border> 50<tr><th colspan="6"><input type = "radio" class="G" value = "0.5">グループ3</th></tr> 51<tr><th>A難度</th><th>B難度</th><th>C難度</th><th>D難度</th><th>E難度</th><th>F難度</th></tr> 52<tr align="center"> 53<td><label><input type="radio" class="G" value="0.1">前宙</label></td> 54<td><label><input type="radio" class="G" value="0.2">前宙</label></td> 55<td><label><input type="radio" class="G" value="0.3">前宙</label></td> 56<td><label><input type="radio" class="G" value="0.4">前宙</label></td> 57<td><label><input type="radio" class="G" value="0.5">前宙</label></td> 58<td><label><input type="radio" class="G" value="0.6">前宙</label></td> 59</tr> 60<tr> 61<td colspan="6">合計点：<span class="total">0</span>点</td> 62</tr> 63</table> 64</div> 65 66
投稿2019/06/07 00:12
編集2019/06/07 04:17
総合スコア114784
らちが空きそうもないのでsampleつけました
仕様はきちんと提示してください
ラジオボタンは今回は関係ないということでよいですね？
大変お世話になっております。申し訳ありませんがラヂオボタンて作った以下の表を追加したいと考えています。また質問内の下部に記載したjsによりる計算機能を付けたいです。
<div class= "group3">
<table border="" width="840px" height="700">
<tr><th colspan=6 height="10%"><input type = "radio" class="G4" value = "0.5" id="G3">グループⅢ</th></tr>
<tr width="16%" height="10%">
<th>A難度</th><th>B難度</th><th>C難度</th><th>
D難度</th><th>E難度</th><th>F難度</th>
</tr>
<tr align="center">
<td>
<input type="radio" class="G3" value="0.1" id="A1" name="finish"/><label for="A1">前宙</label>
</td>
<td>
<input type="radio" class="G3" value="0.2" id="B1" name="finish"/><label for="B1">前宙</label>
</td>
<td>
<input type="radio" class="G3" value="0.3" id="C1" name="finish"/><label for="C1">前宙</label>
</td>
<td>
<input type="radio" class="G3" value="0.4" id="D1" name="finish"/><label for="D1">前宙</label>
</td>
<td>
<input type="radio" class="G3" value="0.5" id="E1" name="finish"/><label for="E1">前宙</label>
</td>
<td>
<input type="radio" class="G3" value="0.6" id="F1" name="finish"/><label for="F1">前宙</label>
</td>
</tr>
<tr>
<td colspan="6" align="center">
合計点：<span id="total_3">0</span>点
</td>
</tr>
</table>
</div>
group3のラジオ版を追記しました
あなたの回答
tips
プレビュー
