HTMLのラジオボタンは、複数の選択肢の中から
特定のものを選ばせる時などに使用します。
利用シーンでは、男性・女性を選択するものであったり、
利用規約の同意・非同意、旅館の予約コースの選択であったりと様々です。
HTMLのラジオボタンの作成はとても簡単で、下記の様に作成する事が出来ます。
上記では、『radio-group』というラジオボタンのグループ内で
特定の選択をさせるというものです。
選択出来るのは必ず一つで、選択状態を変更すると他の選択状態は破棄されます。
formで送信する際は、選択されたラジオボタンの「value」の値のみ送信されます。
ラジオボタンはとても便利で、よく使うHTML要素かと思いますが、
そのまま使用するとブラウザ毎に表示が異なり、
デザインにこだわったサイトでは、他のデザインと協調せず、ういてしまいます。
そこで、今回はラジオボタンを手軽に画像にする方法を解説します。
ラジオボタンに使用する画像と、制御する為のjQueryさえ用意できれば、
簡単に素敵なラジオボタンを作成する事が出来ます。
ラジオボタンとして使用する画像を用意しよう。
今回は、ラジオボタンを画像にする方法ですが、
逆に言うと画像をラジオボタンとして使用する方法です。
ですので、特に画像に対する制限はありません。
用意された画像に対して、ラジオボタンと同じ制御を加えますので、
サイズも形も色も何でも大丈夫です。
ただし、UIの観点からユーザが「これはラジオボタンだ」「いずれかを選択するものだ」
と認識させなければいけないので、
大枠の雰囲気は標準のラジオボタンに近づけた方が良いかと思います。
大体良く見かけるのが、形は通常のラジオボタンと同じでもカラーにバリエーションがあったりだとか、
少し大きめで、選択済みを示すライトが二重になっている等、ちょっとしたデザインが乗っかっている程度です。
あまりにも凝ったデザインのラジオボタンにしてしまうと、
ユーザが操作に迷ってしまいますので、出来るだけシンプルにしましょう。
これらを踏まえて用意する画像は二点です。
- 未選択時のラジオボタン画像
- 選択時のラジオボタン画像
それぞれ、サイズは同じ方が好ましいです。そして、選択中と未選択が
はっきりと区別できる様な画像が理想です。
HTMLにラジオボタン画像を配置しよう
次に、実際にラジオボタン用の画像をHTMLへ配置しましょう。
例えば下記の様な状態です。
上記では、「radio-off.png」という未選択画像を並べています。
そして、この後の解説でしようします「class」属性と「id」属性を設定します。
「class」属性では、ラジオボタンのグループで同じ値を設定してください。
そのグループ内で、特定のもののみ選択出来るような制御となります。
「id」属性には、一意な値を設定して下さい。
ラジオボタンが選択された際、この「id」属性に設定されている値を
選択された値としてサーバーへ送信します。
選択された値を保持する為の要素を作成しよう
今回は画像にラジオボタンの制御を加える形ですので、
そのままでは、選択された値はサーバーへ送信する事が出来ません。
そこで、選択された値をサーバーへ送信する用にインプット要素を作成しておきましょう。
インプット要素の「type」を「hidden」とする事で、非表示にしています。
「name」はサーバー上で送られて来た値を識別する為の名前です。
通常のラジオボタンでは、複数のラジオボタンに同じ「name」を設定する事により、
選択されたラジオボタンの値が「name」の識別名でサーバーへ送信されます。
今回もラジオボタンと同じ制御をとりますので、送信する項目は一つとし、
選択内容によって、このインプット要素の値を切り替えたいと思います。
ラジオボタンの動きをエミュレートしよう
いよいよラジオボタンのメインロジック部分です。
今回はjQueryを使用しますが、生のJavaScriptでも問題ありません。
気にするべきところは実装方法よりも「考え方」ですので、
どういった動きでラジオボタンをエミュレートしているのか見てみましょう。
まずは、ラジオボタン画像が選択されたイベントを取得する必要があります。
その選択されたイベントを処理のトリガーとします。
選択イベントは下記の様にクリックイベントの設定で行う事が出来ます。
$(".radio-group").click(function(){
// 処理
});
クリックイベントをセレクタ「".radio-group"」に対して設定しています。
セレクタ「".radio-group"」では、「class」要素に対して「radio-group」を設定している要素が
対象となりますので、これまでに設置したラジオボタン画像が対象となります。
次に、クリックされた事によって作動する処理ですが、
大きく分けて三段階のステップを踏みます。
- ・全ての選択状態を破棄する
- ・選択された項目を選択済みの状態へと変化させる
- ・サーバーへ送信用に、インプット要素へ選択された値を設定する
クリックされたら上記の３ステップを踏むように実装します。
/* 画像ラジオボタンの制御
----------------------------------------------------------------------------- */
$(".radio-group").click(function(){
// 全てのラジオボタンを未選択画像へ変更
$(".radio-group").attr("src", "radio-off.png");
// 選択されたラジオボタンを選択済み画像へ変更
$(this).attr("src", "radio-on.png");
// サーバー送信用に、インプット要素へ値を設定する
$("input[name=selected-radio]").val(this.id);
});
ソース上のコメント通り、３ステップにて処理を行っています。
１ステップ目では、クリックイベントの設定と同じように
グループ全体に対して未選択画像を設定しています。
２ステップ目では、クリックイベントでは「this」の値が
クリックイベントが発生した要素自体を指しますので、
クリックされた要素自体に対して選択済みの画像を設定しています。
３ステップ目では、ラジオボタンの選択値をサーバーへ送信させる為に、
選択される度に項目が上書きされる作りとなっています。
選択された要素の値とは、今回の例では「id」へ設定された値を使用しています。
これで、通常のラジオボタンと同じ様に、
好きな画像を使用して、クリックによって特定の要素を選択させる事が可能となります。
/* 画像ラジオボタンの制御
----------------------------------------------------------------------------- */
$(".radio-group").click(function(){
$(".radio-group").attr("src", "radio-off.png");
$(this).attr("src", "radio-on.png");
$("input[name=icon]").val(this.id);
});
今回はラジオボタンを画像で表現する方法でしたが、
考え方を変えると、「特定の選択項目に対して選択された値をサーバーへ送信する」というロジックですので、
ラジオボタン以外にも沢山応用する事が出来ます。
これまでに、ラジオボタンの画像は通常のラジオボタンに近づけた方が良いとお話しましたが、
例えば、写真を選択する画面があったとして、その写真自体をラジオボタンの様な制御を組み込んでみても
良いかも知れません。
選択済みはカラー写真で表示し、未選択はモノクロ写真としてみたり、
画像を切り替えるのではなく、画像にシャドウを掛けて選択済み画像を浮かせて見たり、
枠線を付けてみても面白いかも知れません。
今回解説した内容は、とてもシンプルで大した事ではないかも知れませんが、
応用の幅が大きいので記事にして解説させて頂きました。
今後のWeb開発において、こういったテクニックを頭の片隅に置いていただければ幸いです。
Categories:
