【チェックボックス&ラジオボタン】javascriptを使用して合計金額を計算し表示する方法

 

チェックボックスとラジオボタンの違い

  • チェックボタンは複数選択可能 <input type=”checkbox”>
  • ラジオボタンはどれか一つのみ選択可能 <input type=”radio”>

上記のような認識で大丈夫かと思います。

完成したコード(仮)

aiueo.js


var size = [
            { "name" : "Sサイズ", "price" : 1980},
            { "name" : "Mサイズ", "price" : 2980},
            { "name" : "Lサイズ", "price" : 3980},
        ];

        var option = [
            { "name" : "裾上げ", "price" : 500},
            { "name" : "今後のオプション追加用", "price" : 1},
        ];
        
        var size_click = document.getElementsByName('size');
        //sizeをチェックした際にイベント発生させる
        for(i=0;i<size_click.length;i++){
            size_click[i].addEventListener('click', function(e){
                price_sum(size, option);
            });
        }

        var option_click = document.getElementsByName('option');
        //optionをチェックした際にイベント発生させる
        for(i=0;i<option_click.length;i++){
            option_click[i].addEventListener('click', function(e){
                price_sum(size, option);
            });
        }





        function price_sum(size, option){
            var sum = 0;
            var select = "";
            
            //size(ラジオボタン)合計計算
            for (var i = 0; i < size_click.length; i++){
                if(size_click[i].checked){

                    //連想配列を分解させて、その配列の中身を「select,sum」に代入
                    var sizes = size[i];
                    select += " ■ " + sizes["name"] +":"+ sizes["price"] + "円";
                    sum += parseInt(sizes["price"]);
                }
            }
            
            //option(チェックボックス)合計計算
            for (var i = 0; i < option_click.length; i++){
                if(option_click[i].checked){

                    //連想配列を分解させて、その配列の中身を変数に代入
                    var options = option[i];
                    select += " ■ " + options["name"] +":"+ options["price"] + "円";
                    sum += parseInt(options["price"]);
                }
            }


            //id="total_view"にsumを表示
            var totalView = document.getElementById('total_view');
            totalView.innerText = sum;

            //id="total_select"にselectを表示
            var total_select = document.getElementById('total_select');
            total_select.innerText = select;
        }
index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<form action="aiueo.php" method="POST">
    <table>
        <tbody>
            <tr>
              <th>サイズ ※必須</th>
              <td><input type="radio" name="size" value="1980円" required>1980円</td>
              <td><input type="radio" name="size" value="2980円" required>2980円</td>
              <td><input type="radio" name="size" value="3980円" required>3980円</td>
            </tr>
            <tr class="&quot;option_class">
              <th>オプション</th>
              <td><input type="checkbox" name="option" value="500円">500円</td>
              <td><input type="checkbox" name="option" value="1円">1円</td>
            </tr>
        </tbody>
    </table>

    
    <p>合計:<span id="total_view">0</span>円</p>
    <p><span id="total_select">何も選択していません</span></p>
    
    <input type="submit" value="送信する">
</form>
        <script type="text/javascript" src="aiueo.js"></script>
</body>
</html>

上記のように入力すればとりあえずは動作すると思います。

完璧には解説しませんが、軽く解説します。 ※この記事ではaiueo.phpでの受け取り処理は記述していません。

 

 

 

 

コードの解説

index.php
<input type="radio" name="size" value="1980円" required>

required属性を入れることでredioをどれか一つ選択する事が必須になります。選択せずに送信した場合はエラーとなりますので是非お試しください。

 

 

 

aiueo.js

var size = [
    { "name" : "Sサイズ", "price" : 1980},
    { "name" : "Mサイズ", "price" : 2980},
    { "name" : "Lサイズ", "price" : 3980},
];


var sizes = size[i];
select += " ■ " + sizes["name"] +":"+ sizes["price"] + "円";

上記のように変数sizeにデータを埋め込んで、これらをinnerTextで表示させています。innerTextとは名前の通りtextとして表示させるプロパティです。

 

size[i]はsizeのi番目の要素を取得するという意味です。

  • size[0]だと{ “name” : “Sサイズ“, “price” : 1980}を取得
  • size[1]だと{ “name” : “Mサイズ”, “price” : 2980}を取得
  • size[2]だと{ “name” : “Lサイズ”, “price” : 3980}を取得

size[0]を取得した場合、sizes[“name”]Sサイズを取得したことになります。

ちなみに今回の場合 「 i 」 とはチェックされた「ラジオボタン及びチェックボックス」のことで、for文でiを回して、if文でチェックされているものを判別しています。

 

 

 

getElementsByName と getElementByIdの違い

var size_click = document.getElementsByName('size');
var size_click = document.getElementById('size');
  • getElementsByNameはname属性を取得します。
  • getElementByIdはid属性を取得します。

 

そして下記のような違いもあります。

  • getElementsByNameは複数(配列)として取得
  • getElementByIdは単体で取得

その為取得した要素の取り出し方にも違いがあります。下記のように取り出します。

  • nameの場合: size_click[0].value = select;
  • idの場合  : size_click.value = select;

 valueとはvalue属性の値を書き換えるプロパティです。

 

 

 

完成したコード

完成したコードはあえて表示させません。上記知識があれば可能だと思いますので、興味がある方はぜひやってみてください😊

 

完成したコード(仮)には課題があります。例えば、今後Mサイズの料金を変えないといけなくなった場合3箇所も変更しないといけない点があります。

  • <td><input value=”①2980円”>②2980円</td>
  • { “name” : “Mサイズ”, “price” : ③2980},

現在は①②③を変更しないといけませんが③のみにして、そのデータを①②に表示するように修正すると、今後の問題の起こりにくさや、作業量の削減につながると思います。

プロジェクトの大きさや、inputタグの数にもよると思いますが、わからない方にとっては勉強になると思いますので、興味がある方はやってみてください。

 

ヒント

<td><input id=”〇〇” value=””><span id=”〇”></span></td>

var getIdInputSize1 = document.getElementById(‘〇〇’);

var size1 = size[1];

getIdInputSize1.value = ▲▲;

その他

 

 

まだjavascript勉強し始めてそんなに経っていない為改善点があると思いますが、最後まで閲覧していただきありがとうございました。少しでもお役に立てたら幸いです。

  

最終学歴高卒。実務未経験から自社開発&受託開発をしている企業に入社した、入社1年目のエンジニア。20代前半。
WordPress・PHP / Laravel・JavaScript

ひろきをフォローする

コメント

タイトルとURLをコピーしました