Q&A
コードはマークダウンのcode機能を利用してご提示ください。
難しければコード部分を選択して<code>ボタンを押すだけでも良いです。
色々入り混じっているので不要な部分は削ったりして調整してください。
前回質問した体操競技に関する、表から選んだ技の合計点を表示できるwebサイトについての質問です。
以下にHTML,CSSのコードを示しました。A難度=0.1点 B難度=0.2点,C難度=0.3点という具合に難度が上がるにつれ点数が0.1点ずつ上がります。
表のcheckboxで選んだ技の合計点をjQueryで表示させたいのですが、合計点数を表示させるコードをご存知の方、教えて頂けると幸いです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="floor.css"> <title>floor Dscore</title> </head> <body> <div class= "group1"> <table border="" width="840px" height="700"> <tr><th colspan=6 height="10%">グループⅠ</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="checkbox" name="A1" value=0.1 id="A1" /><label for="A1">前宙</label> </td> <td> <input type="checkbox" name="B1" value=0.2 id="B1" /><label for="B1">前宙</label> </td> <td> <input type="checkbox" name="C1" value=0.3 id="C1" /><label for="C1">前宙</label> </td> <td> <input type="checkbox" name="D1" value=0.4 id="D1" /><label for="D1">前宙</label> </td> <td> <input type="checkbox" name="E1" value=0.5 id="E1" /><label for="E1">前宙</label> </td> <td> <input type="checkbox" name="F1" value=0.6 id="F1" /><label for="F1">前宙</label> </td> </tr> <tr align="center"> <td> <input type="checkbox" name="A2" value=0.1 id="A2" /><label for="A2">前宙</label> </td> <td> <input type="checkbox" name="B2" value=0.2 id="B2" /><label for="B1">前宙</label> </td> <td> <input type="checkbox" name="C2" value=0.3 id="C2" /><label for="C2">前宙</label> </td> <td> <input type="checkbox" name="D2" value=0.4 id="D2" /><label for="D2">前宙</label> </td> <td> <input type="checkbox" name="E2" value=0.5 id="E2" /><label for="E2">前宙</label> </td> <td> <input type="checkbox" name="F2" value=0.6 id="F2" /><label for="F2">前宙</label> </td> </tr> <tr align="center"> <td> <input type="checkbox" name="A3" value=0.1 id="A3" /><label for="A3">前宙</label> </td> <td> <input type="checkbox" name="B3" value=0.2 id="B3" /><label for="B3">前宙</label> </td> <td> <input type="checkbox" name="C3" value=0.3 id="C3" /><label for="C3">前宙</label> </td> <td> <input type="checkbox" name="D3" value=0.4 id="D3" /><label for="D3">前宙</label> </td> <td> <input type="checkbox" name="E3" value=0.5 id="E3" /><label for="E3">前宙</label> </td> <td> <input type="checkbox" name="F3" value=0.6 id="F3" /><label for="F3">前宙</label> </td> </tr> <tr align="center"> <td> <input type="checkbox" name="A4" value=0.1 id="A4" /><label for="A4">前宙</label> </td> <td> <input type="checkbox" name="B4" value=0.2 id="B4" /><label for="B4">前宙</label> </td> <td> <input type="checkbox" name="C4" value=0.3 id="C4" /><label for="C4">前宙</label> </td> <td> <input type="checkbox" name="D4" value=0.4 id="D4" /><label for="D4">前宙</label> </td> <td> <input type="checkbox" name="E4" value=0.5 id="E4" /><label for="E4">前宙</label> </td> <td> <input type="checkbox" name="F4" value=0.6 id="F4" /><label for="F4">前宙</label> </td> </tr> </table> </div> </body>``````ここに言語を入力 ここに言語を入力 ```CSS コード ```@charset = "utf-8";HTML
1コード
table {
table-layout: fixed;
}
.group1 table{
padding: 50px 50px;```ここに言語を入力
コード
background-color:#fafad2; }
「コードをください」のような質問は
teratailで推奨されていない「丸投げ」になります。
> 合計点数を表示させるコードをご存知の方、教えて頂けると幸いです。
https://teratail.com/help/avoid-asking
回答1件
0
ベストアンサー
こんにちは
チェックされているボックスのvalue 属性に入っている数値を合計して返す関数は、たとえば
javascript
1const sum_scores = () => 2 $('input[type="checkbox"]:checked') 3 .map((_, e) => +e.value) 4 .get() 5 .reduce((sum, e) => sum + e, 0);
のように書けます。
ただ、これの結果を表示するときは、計算結果が常に少数第１位までで収まる値になっているとはいえないので、例えば<span id="total"></span> に表示するならば、以下のようにします。
$('#total').text(Math.round(10 * sum_scores()) / 10);
以下、上記を使ったHTML全体です。（※合計行を追加しました。）
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="floor.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 const sum_scores = () => 12 $('input[type="checkbox"]:checked') 13 .map((_, e) => +e.value) 14 .get() 15 .reduce((sum, e) => sum + e, 0); 16 17 $('input[type=checkbox]').change(function () { 18 $('#total').text(Math.round(10 * sum_scores()) / 10); 19 }); 20 }); 21 </script> 22</head> 23<body> 24<div class= "group1"> 25 <table border="" width="840px" height="700"> 26 <tr><th colspan=6 height="10%">グループⅠ</th></tr> 27 <tr width="16%" height="10%"> 28 <th>A難度</th><th>B難度</th><th>C難度</th><th> 29 D難度</th><th>E難度</th><th>F難度</th> 30 </tr> 31 <tr align="center"> 32 <td> 33 <input type="checkbox" name="A1" value="0.1" id="A1" /><label for="A1">前宙</label> 34 </td> 35 <td> 36 <input type="checkbox" name="B1" value="0.2" id="B1" /><label for="B1">前宙</label> 37 </td> 38 <td> 39 <input type="checkbox" name="C1" value="0.3" id="C1" /><label for="C1">前宙</label> 40 </td> 41 <td> 42 <input type="checkbox" name="D1" value="0.4" id="D1" /><label for="D1">前宙</label> 43 </td> 44 <td> 45 <input type="checkbox" name="E1" value="0.5" id="E1" /><label for="E1">前宙</label> 46 </td> 47 <td> 48 <input type="checkbox" name="F1" value="0.6" id="F1" /><label for="F1">前宙</label> 49 </td> 50 </tr> 51 <tr align="center"> 52 <td> 53 <input type="checkbox" name="A2" value="0.1" id="A2" /><label for="A2">前宙</label> 54 </td> 55 <td> 56 <input type="checkbox" name="B2" value="0.2" id="B2" /><label for="B1">前宙</label> 57 </td> 58 <td> 59 <input type="checkbox" name="C2" value="0.3" id="C2" /><label for="C2">前宙</label> 60 </td> 61 <td> 62 <input type="checkbox" name="D2" value="0.4" id="D2" /><label for="D2">前宙</label> 63 </td> 64 <td> 65 <input type="checkbox" name="E2" value="0.5" id="E2" /><label for="E2">前宙</label> 66 </td> 67 <td> 68 <input type="checkbox" name="F2" value="0.6" id="F2" /><label for="F2">前宙</label> 69 </td> 70 </tr> 71 <tr align="center"> 72 <td> 73 <input type="checkbox" name="A3" value="0.1" id="A3" /><label for="A3">前宙</label> 74 </td> 75 <td> 76 <input type="checkbox" name="B3" value="0.2" id="B3" /><label for="B3">前宙</label> 77 </td> 78 <td> 79 <input type="checkbox" name="C3" value="0.3" id="C3" /><label for="C3">前宙</label> 80 </td> 81 <td> 82 <input type="checkbox" name="D3" value="0.4" id="D3" /><label for="D3">前宙</label> 83 </td> 84 <td> 85 <input type="checkbox" name="E3" value="0.5" id="E3" /><label for="E3">前宙</label> 86 </td> 87 <td> 88 <input type="checkbox" name="F3" value="0.6" id="F3" /><label for="F3">前宙</label> 89 </td> 90 </tr> 91 <tr align="center"> 92 <td> 93 <input type="checkbox" name="A4" value="0.1" id="A4" /><label for="A4">前宙</label> 94 </td> 95 <td> 96 <input type="checkbox" name="B4" value="0.2" id="B4" /><label for="B4">前宙</label> 97 </td> 98 <td> 99 <input type="checkbox" name="C4" value="0.3" id="C4" /><label for="C4">前宙</label> 100 </td> 101 <td> 102 <input type="checkbox" name="D4" value="0.4" id="D4" /><label for="D4">前宙</label> 103 </td> 104 <td> 105 <input type="checkbox" name="E4" value="0.5" id="E4" /><label for="E4">前宙</label> 106 </td> 107 <td> 108 <input type="checkbox" name="F4" value="0.6" id="F4" /><label for="F4">前宙</label> 109 </td> 110 </tr> 111 <tr> 112 <td colspan="6" align="center"> 113 合計点：<span id="total">0</span>点 114 </td> 115 </tr> 116 </table> 117</div> 118</body> 119</html>
補足
以下のように、 sum_scores() の一部を修正しました。
修正前：
javascript
1.reduce((sum, e) => sum + e);
修正後
javascript
1.reduce((sum, e) => sum + e, 0);
投稿2019/05/28 03:54
編集2019/05/28 04:51
総合スコア9058
あなたの回答
tips
プレビュー
