チェックボックス

チェックボックス

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

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

チェックボックスをひとつだけ作るなら input 要素に type=“checkbox” を指定し、対応する label を作ってやります。この時 label は for 属性で input 要素のIDとセマンティックにつなげられている必要があります。

<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
<label for="checkbox-0">I agree</label>

これによって、次のように基本的なチェックボックスがつくられます。デフォルトで横幅は親要素いっぱいになります。

ミニバージョン

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

<input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
<label for="checkbox-mini-0">I agree</label>

フィールドコンテナとレジェンド

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

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

<div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
                <legend>Agree to the terms:</legend>
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1">I agree</label>
    </fieldset>
</div>

縦方向チェックボックスグループ

一般的にこのウィジェットは、質問のタイトルが書かれた下に複数のチェックボックスリストが並べられます。複数のチェックボックスをボタングループに見えるようにするため、フレームワークは自動的に余白を取り除いたり、角を丸くする位置を調整したりします。

<div  data-role="fieldcontain"> 
        <fieldset data-role="controlgroup"> 
                <legend>Choose as many snacks as you'd like:</legend> 
                <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> 
                <label for="checkbox-1a">Cheetos</label> 
                <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> 
                <label for="checkbox-2a">Doritos</label> 
                <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> 
                <label for="checkbox-3a">Fritos</label> 
                <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /> 
                <label for="checkbox-4a">Sun Chips</label> 
        </fieldset> 
</div> 

横方向チェックボックスグループ

チェックボックスグループは、複数の値を選択するボタンとしても作成できます。たとえばワードプロセッサの書式で用いられる太字、斜体、下線の設定ボタンのような感じです。こうした横方向のチェックボックスグループを作るには 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='checkbox']").checkboxradio({ mini: "true" });

theme string

default: null, inherited from parent

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

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

メソッド

チェックボックスは、次のようなメソッドを持っています。

enable 使用不可状態のチェックボックスを使用可能にします。

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

disable チェックボックスを使用不可状態にします。

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

refresh カスタム要素の値を更新します。

JavaScriptからチェックボックスの値を操作した場合、この refresh メソッドを発行して見た目を更新する必要があります。

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

イベント

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

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

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

create チェックボックスが生成された際に発生します。

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