ラジオボタン

ラジオボタン

ラジオボタンは、複数のオプションからひとつだけを選ばせる際に用います。従来のデスクトップPC上のラジオボタンは、jQuery Mobileのようにタッチに最適化されていませんでした。ここでは label 要素をラジオボタンにすることでタップ領域を大きくし、見た目にもクリックしやすくしています。独自のアイコンを設定することで、更に見た目をよくすることも出来ます。

以下に紹介するラジオボタンやチェックボックスは、通常の input/label としてマークアップされますが、よりタッチパネルに適した形に整形されます。スタイルが適用されるコントロールは、実際には input 要素の上に重ねられた label 要素です。もしブラウザの問題などで label を重ねることに失敗した場合、それでも元々のコントロールが表示されることになります。ほとんどのブラウザはでは label をクリックすることで繋がっている input の値が切り替えられますが、少数ながらそうでないブラウザも存在します。そうしたブラウザにもjQuery Mobileは対応しています。デスクトップPCでは、これらのコントロールはキーボードやスクリーンリーダーにも対応しています。ラジオボタンに指定可能な属性についてはdata属性リファレンスを参照してください。

縦方向ラジオボタングループ

ラジオボタンを作るには input 要素に type=“radio” を指定し、対応する label を記述します。この時 label 要素は for 属性を使って input のIDと対応させてください。

ラジオボタンでは label を各チェックボックスのテキストに使っているため、グループ全体の説明には filedset の legend を使うようお勧めします。

最後にこの fieldset 全体を data-role=“controlgroup” を指定した div で囲んでやります。

<fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
        <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
        <label for="radio-choice-1">Cat</label>

          <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
        <label for="radio-choice-2">Dog</label>

          <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
        <label for="radio-choice-3">Hamster</label>

          <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
        <label for="radio-choice-4">Lizard</label>
</fieldset>

このコードにより、縦方向にグループ化されたラジオボタンのセットがつくられます。デフォルトでは横幅は親要素いっぱいになるため、ラベルは別の行に表示されます。

ミニバージョン

ツールバー内など狭いスペースでは、よりコンパクトな大きさのボタンが便利です。ボタンに data-mini=“true” 属性を追加することで、ミニサイズにできます。

<fieldset data-role="controlgroup" data-mini="true">

          <input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />

          <label for="radio-mini-1">Credit</label>
        <input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2"  />

          <label for="radio-mini-2">Debit</label>
        <input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3"  />

          <label for="radio-mini-3">Cash</label>
</fieldset>

フィールドコンテナ

ラジオボタンを *data-role=“fieldcontain” 属性を指定したコンテナで囲ってやることもできます。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1">Cat</label>
                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2">Dog</label>
                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
                <label for="radio-choice-3">Hamster</label>
                <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
                <label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>

こうした縦方向に並んだラジオボタンセットの見栄えを調整するために、フレームワークは data-role=“controlgroup” 属性が指定されたコンテナがある場合、自動的にボタン間の余白を取り除いたり、最上部と最下部だけの角を丸くするなどの処理を行なっています。

横方向ラジオボタングループ

ラジオボタンは、ひとつだけが押された状態になるスイッチのグループのように使うこともできます。横方向のグループを作るには data-type=“horizontal” を fieldset に指定してください。

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">

フレームワークが label を float 状態にし、1行に横並びにします。ラジオボタンアイコンは非表示にされ、角を丸くする位置も調整されます。

オプション

ラジオボタンは、次のようなオプションを持っています。

mini boolean

default: false

要素のサイズを、よりコンパクトなミニバージョンにする。このオプションは、data属性でも指定可能: data-mini="true"

$("input[type='radio']").checkboxradio({ mini: "true" });

theme string

default: null, inherited from parent

ウィジェットの色(スウォッチ)を指定します。テーマで定義されたスウォッチをあらわすaからzまでのアルファベットが指定できます。デフォルトでは、個別に設定されない場合、親要素のスウォッチ指定を引き継ぐようになっています。このオプションはdata属性でも次のように表現できます: data-theme="a"

$("input[type='radio']").checkboxradio({ theme: "a" });

メソッド

ラジオボタンは、次のようなメソッドを持っています。

enable 使用不可状態のラジオボタンを使用可能にします。

$("input[type='radio']").checkboxradio('enable'); 

disable ラジオボタンを使用不可状態にします。

$("input[type='radio']").checkboxradio('disable'); 

refresh ラジオボタンの値を更新します。

JavaScriptからラジオボタンの状態を操作した場合、この refresh メソッドを呼んで見た目を更新する必要おがあります。

$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh"); 

イベント

直接 input 要素イベントにバインドしてください。jQuery Mobileによる仮想的なイベント、もしくは change, focus, blur などのような標準的なJavaScriptのイベントにバインドできます。

$("input[type='radio']").bind( "change", function(event, ui) {
  ...
});

ラジオボタンプラグインは、次のようなカスタムイベントを持っています。

create ラジオボタンが生成された時に発生します。

$("input[type='radio']").checkboxradio({
   create: function(event, ui) { ... }
});