チェックボックスとラジオボタンの違い
- チェックボタンは複数選択可能 <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=""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勉強し始めてそんなに経っていない為改善点があると思いますが、最後まで閲覧していただきありがとうございました。少しでもお役に立てたら幸いです。
コメント