ラジオボタンを使って表示項目を切替
画像のようなラジオボタンと一覧表があり、選択したラジオボタンのデータを表示する機能です。
画像だけでは、この機能でできることがイメージし辛いですが、ログイン画面で「未登録」「登録済」のラジオボタンを設置して、それぞれのフォームが表示されるなどのページが作成できます！
##早速実装しましょう！
#####まずHTMLのラジオボタンコードです。
ここでのポイントは以下3点です。（※この後のJavaScriptで使用します。）
- Formに名前をつけましょう。
この記事では <form name="RadioForm> - 各ラジオボタンに任意のIDをつけましょう。
id="all" id="april" などですね。 - クリックイベントをつけましょう。
onclick="monthRadio();です。
それぞれ名前のつけ方は適当なので、自分が作るものに合わせて変更して下さい。
<h1>誕生月</h1>
<form name="RadioForm">
<input type="radio" name="month" id="all" onclick="monthRadio();" value="all">
<label for="all">すべて</label>
<input type="radio" name="month" id="april" onclick="monthRadio();" value="april">
<label for="april">4月</label>
<input type="radio" name="month" id="may" onclick="monthRadio();" value="may">
<label for="may">5月</label>
<input type="radio" name="month" id="june" onclick="monthRadio();" value="june">
<label for="june">6月</label>
</form>
#####次にHTMLのTableのコードです。
（今回はJSメインなのでデータベースは利用していません。是非応用してチャレンジして下さい！）
ここでのポイントはひとつだけです。
- データの内容に合わせてクラスを指定しましょう。
<tr class="april"> の箇所です。
このクラスを指定して表示・非表示を切り替えます。
各月のデータがひとつだけの場合は、クラスではなくIDを使用する方がスマートです！（4月、5月、6月生まれが一人だけしか入らないデータベースの場合などです。）
IDを使用している記事はたくさんあるので、ググってみて下さい！
<table border="solid 1px">
<tr><th width="60px">No.</th><th style="width: 200px; text-align: left;">名前</th><th>誕生日</th></tr>
<tr class="april">
<td>1</td>
<td style="text-align: left;">親鸞</td>
<td>4月1日</td>
</tr>
<tr class="june">
<td>2</td>
<td style="text-align: left;">アダム・スミス</td>
<td>6月5日</td>
</tr>
<tr class="may">
<td>3</td>
<td style="text-align: left;">斎藤茂吉</td>
<td>5月14日</td>
</tr>
//以下繰り返しなので省略
</table>
#####やっとこさJavaScriptです。 お待たせしました！
ここではコード内のコメントで説明していきます。
1点だけ注意したいところが、querySelectorAll('クラス名')で指定した要素はそのまま使えません。
私は以下のように書いており、ずっと動かねぇ。。。と硬直していました ( ﾟдﾟ)
querySelectorAll('クラス名').style.display="none"
Consoleでこんなエラー文が出たりします。
Uncaught TypeError: Cannot set property 'display' of undefined
querySelectorAllで取得した場合は、forEachでひとつひとつ要素を取り出してstyleを決めます。
//ラジオボタンのクリックイベントで付けた関数で機能を実装します。
function monthRadio() {
//どのラジオボタンがチェックされているか。（条件分岐で使用）
check0 = document.RadioForm.all.checked; //すべてにチェック
check1 = document.RadioForm.april.checked; //4月にチェック
check2 = document.RadioForm.may.checked; //5月にチェック
check3 = document.RadioForm.june.checked; //6月にチェック
//表のところで指定したクラスを取得しています。（表示・非表示の切替で使用）
var all = document.querySelectorAll('.april, .may, .june');
var april = document.querySelectorAll('.april');
var may = document.querySelectorAll('.may');
var june = document.querySelectorAll('.june');
//チェックされているラジオボタンにより分岐させていきます。
//すべてにチェックがtrueなので、すべてにチェックされているときに表示したいコードを書きます。
if (check0 == true) {
//取得したクラスをforEachで展開して、それぞれのクラスのdisplayスタイルを指定します。
all.forEach(function(elem){
elem.style.display = "";
});
}
//上記と同様ですね。
else if (check1 == true) {
april.forEach(function(elem){
elem.style.display = "";
});
may.forEach(function(elem){
elem.style.display = "none";
});
june.forEach(function(elem){
elem.style.display = "none";
});
//繰り返しになるので以下省略
}
}
これでラジオボタンを使った表示切替が実装できした！
getElementByIdを使用した記事は多くあったんですが、クラスで指定しないといけない場合の記事が見つからなかったので、自分用の備忘録にでも書いてみました。
初めて書く記事なので、未熟かと思いますがアップデートや補足記事も書きたいと思いますので、よろしくお願いします！