×

簡単なCSSとjQueryでラジオボタンを使いやすくさせる方法【ユーザビリティ向上】

2016年2月14日 コーディング

ラジオボタン

Web上での問い合わせフォーム、シミュレーション画面などで、よくラジオボタンが使用されていますね。

下のラジオボタンを見てください。

 ラジオボタンサンプル1
 ラジオボタンサンプル2

CSSで装飾をしていないデフォルトのラジオボタンです。
ラジオボタンはこのデフォルトの状態が一般的に知られる形ですが、デフォルトのスタイルのままだとサイトデザインから浮いた印象になり、ちょっと使いづらいですよね。

今回はラジオボタンをCSSとjQueryを使ってユーザーにとって使いやすいかつ視覚的に分かりやすくする方法を紹介します。

サンプルで動作を確認

まずはCSSとjQueryで処理を施した、下記ラジオボタンのサンプルDEMOを見てください。

DEMO

デフォルトのラジオボタンではなく、視覚的にわかりやすく装飾しています。

ラジオボタンというよりも、普通のボタンのように感覚的に項目をクリックさせることを狙いとしています。

作成方法

ボタンをhtmlでコーディング

まずはhtmlで問い合わせフォームを組みます。
下記HTMLのソースコード。

    

下記3つのボタンのうち1つクリック選択してください。

  • ラジオボタン1
  • ラジオボタン2
  • ラジオボタン3

1つのliタグ内に、div要素とinput要素をペアにして記述します。

inputタグは属性をradioにして、display:noneで非表示にしておきます。見た目にはデフォルトのラジオボタンが見えない状態になります。

実際にボタンの役割を担うのはdivタグのほうで、このdivタグにCSSでスタイルを指定します。divタグにはそれぞれbtn_radio_sample0~2のid名をふります。

最初にラジオボタンが選択されていない状態を想定して、switch_offという共通のクラスを付与します。

(後ほどjQueryを使って、クリックされた時にswitch_onというクラスに切り替えます。)

CSSで見た目を装飾する

htmlを記述したら、次はCSSでスタイルを指定して見た目を整えてボタンぽくしていきます。

#radio_demo li {
    float: left;
    margin-right: 18px;
    line-height: 40px;
    list-style: none;
}
 
#radio_demo li:last-child {
    margin-right: 0;
}
#radio_demo li .switch_off {
    border: 2px solid #BBBBBB;
    border-radius: 4px;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    padding: 15px 10px;
    width: 220px;
    color: #313131;
    line-height: 40px;
    background-color: #fff;
    cursor: pointer;
}
 
#radio_demo li .switch_on {
    border: 2px solid #6B4646;
    border-radius: 4px;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    padding: 15px 10px;
    width: 220px;
    color: #fff;
    line-height: 40px;
    background-color: #6B4646;
    cursor: pointer;
}
 
#radio_demo li .switch_off:hover {
    border: 2px solid #6B4646;
    background-color: #6B4646;
    color:#ffffff;
}

HTMLの記述のところでも記述しましたが、inputタグはdisplay:noneの状態なので、inputタグに対してはCSSでスタイルを指定しません。

switch_off(未選択)とswitch_on(選択)のクラスを用意して、異なる2通りのスタイルを指定します。

switch_offとswitch_onの枠線(border)、背景色(background-color)、文字色(color)を変えて違いを出します。

また、cursor: pointer;を記述して、マウスオーバー時にリンクカーソルに変化するようにしておくことで、クリック可能だということ明示できます。

今回はボタンをマウスオーバーした際にもスタイルが変化して、視覚的に分かりやすいようにしています。

jQueryで動きを加える

見た目が整ったら、次は動きをつけます。



headタグ内でjqueryを読み込みます。



実際にボタンへ動きを付けるためのjavascriptのコードはbody閉じタグの直前に記述します(head内だと動作がうまくいかないので)。

jQueryのclickメソッドで、ボタンクリック時にラジオボタンとボタンの状態を切り替えを行う処理をします。

ラジオボタンそれぞれに動きをつけるわけですが、例としてラジオボタン1に対するコードを見ていきます。

$("#btn_radio_sample0").click(function(){})

ラジオボタン1をクリックした時に中のfunctionを実行するわけですね。

$("#radio_sample0").prop("checked",true);

propメソッドでラジオボタン1のchecked属性をcheckedにして、選択された状態にします。

$("#btn_radio_sample0").addClass("switch_on");
$("#btn_radio_sample1").addClass("switch_off");
$("#btn_radio_sample2").addClass("switch_off");

addClassメソッドでボタン1のクラスをswitch_onにして、残りのボタン2、3のクラスをswitch_offにします。

$("#btn_radio_sample0").removeClass("switch_off");
$("#btn_radio_sample1").removeClass("switch_on");
$("#btn_radio_sample2").removeClass("switch_on");

removeClassメソッドでボタン1のswitch_offを削除します。

また、ボタン1をクリックする前にボタン2もしくはボタン3をクリックしている状態の場合、ボタン2、3にswitch_onクラスがついているかもしれないので、switch_onを削除します。

ラジオボタン2、3をクリックした時の動きも同様です。

主要ブラウザのディベロッパーツールなどで動作を確認するといいでしょう。

余談

propメソッドを使ってラジオボタンやチェックボックスの状態を変更するとき、onchangeを設定している場合にonchangeイベントが発生しなくなる問題がありました。

今回はonchangeは設定してませんでしたが、もしonchangeを設定してるラジオボタンやチェックボックスをpropメソッドで状態変更する場合は、prop(‘checked’, true).trigger(‘change’)のようにtriggerを使う必要があるようです。

まとめ

今回のjQueryのコードの書き方だと、ラジオボタンが増えれば増えるほど無駄にコードの量が増えるというデメリットがあります。

しかし、一つのフォームでラジオボタンを何十個も使うことはあまり現実的では無いと思うので、今回書いたコードで十分事足りるかと思います。

簡単なコードでラジオボタンを見た目にも操作にもわかりやすくしてユーザビリティを向上させることができることが分かったかと思うので、まだやったことないという方は一度試してみてください。

関連記事