質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

jQueryでの計算機能について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 276

kuuuuuya

score 28

前回質問した体操競技に関する、表から選んだ技の合計点を表示できる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>``````ここに言語を入力 ここに言語を入力

コード  

@charset = "utf-8";

table {    table-layout: fixed;

}

.group1 table{     padding: 50px 50px;__ここに言語を入力__ コード
background-color:#fafad2;
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/05/28 11:15

    コードはマークダウンのcode機能を利用してご提示ください。
    難しければコード部分を選択して<code>ボタンを押すだけでも良いです。
    色々入り混じっているので不要な部分は削ったりして調整してください。

    キャンセル

  • yasutomi

    2019/05/28 12:10

    「コードをください」のような質問は
    teratailで推奨されていない「丸投げ」になります。
    > 合計点数を表示させるコードをご存知の方、教えて頂けると幸いです。
    https://teratail.com/help/avoid-asking

    キャンセル

回答 1

checkベストアンサー

0

こんにちは

チェックされているボックスのvalue 属性に入っている数値を合計して返す関数は、たとえば

const sum_scores = () =>
    $('input[type="checkbox"]:checked')
        .map((_, e) => +e.value)
        .get()
        .reduce((sum, e) => sum + e, 0);


のように書けます。

ただ、これの結果を表示するときは、計算結果が常に少数第1位までで収まる値になっているとはいえないので、例えば<span id="total"></span> に表示するならば、以下のようにします。

$('#total').text(Math.round(10 * sum_scores()) / 10);

以下、上記を使ったHTML全体です。(※合計行を追加しました。)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="floor.css">
    <title>floor Dscore</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
       $(function() {

         const sum_scores = () =>
             $('input[type="checkbox"]:checked')
               .map((_, e) => +e.value)
               .get()
               .reduce((sum, e) => sum + e, 0);

         $('input[type=checkbox]').change(function () {
            $('#total').text(Math.round(10 * sum_scores()) / 10);
         });
       });
    </script>
</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>
        <tr>
           <td colspan="6" align="center">
               合計点:<span id="total">0</span></td>
        </tr>
    </table>
</div>
</body>
</html>

補足

以下のように、 sum_scores() の一部を修正しました。

修正前:

.reduce((sum, e) => sum + e);

修正後

.reduce((sum, e) => sum + e, 0);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/30 10:42

    返信ありがとうございます。
    Bracketsでコードを書いているんですが、反映の時にエラーが起きてしまいます。何か考えられる問題はございますか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る