jQuery Multi-checkbox - テキストフィールドを複数選択チェックボックスに変えるjQueryプラグイン

  • 2010年6月22日 08:59
  • jQuery Plugins

jQuery Multi-checkboxとは

jQuery Multi-checkboxとは、普通の input type="text" を複数選択チェックボックスに変えてくれる jQuery プラグインです。選択されたチェックボックスの値が、元のテキストフィールドにカンマ区切りで入力されます。

利用シーンはあまりないかもしれませんが、チェックボックスをいくつも作るのが面倒なとき（笑）や、Movable Type のカスタムフィールドなど、CMS の管理画面でも使えるかも知れません。

サンプル

ダウンロード

設置方法

ファイルのアップロード

ダウンロードしたファイルを解凍します。解凍したフォルダの中にある「jQueryMultiCheckbox.js」をサーバーにアップロードします。アップロードする場所はどこでも構いません。

ファイルの読み込み

jQuery と jqueryMultiCheckbox.js を読み込みます。以下のように jQuery を読み込んだ後に、先ほどアップロードした「jQueryMultiCheckbox.js」を読み込んでください（src属性のパスはアップロードしたとおりに変更してください）。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jQueryMultiCheckbox.js"></script>

使い方

使い方は次の３パターンがあります。

title 属性で値を設定する（一番簡単な使い方）

input 要素（type="text"）を用意し、その要素の title 属性に、チェックボックスにしたい値をカンマ区切りで設定します。

サンプルでは、□バッジョ、□ジーコ、□クライフ、□ロマーリオという４つのチェックボックスになっています。この場合の input 要素は次のようになります。クラス名は変更しても構いません。

<input class="multicheck" type="text" title="バッジョ,ジーコ,クライフ,ロマーリオ" value="" />

後は、チェックボックスにしたいセレクタに .multicheckbox() を適用すればOKです。

jQuery(function($){
    $('.multicheck').multicheckbox();
});

label オプションで値を設定する１
（title 属性が設定しにくい場合）

CMS などの管理画面では、title 属性を設定しにくいことが考えられます。そのような場合は、この label オプションで、チェックボックスにしたい値をカンマ区切りで設定すればOKです。

<input class="multicheck3" type="text" value="" />

jQuery(function($){
    $('.multicheck3').multicheckbox({label:'ブラジル,ポルトガル,スペイン,オランダ'});
});

label オプションで値を設定する２
（ラベルと保存される値を変えたい場合）

上記２つの方法は、チェックボックスのラベルと input:text に保存される値が同じになる仕様です。しかし、「ラベル名は日本語で、保存される値は英語がいい」ということもあるかと思います。

そのような場合は、label オプションで {"hoge":"ホゲ"} といった形式で値を指定することで、ラベルと値を変更することができます。

 {"英語（保存される値）":"日本語（表示されるラベル名）"} 

jQuery(function($){
    $('.multicheck5').multicheckbox({show:'show',label:{
            "Brazil":"ブラジル",
            "Portugal":"ポルトガル",
            "Spain":"スペイン",
            "Holland":"オランダ"
        }
    });
});

その他のオプション設定

show: string

本番前に、テキストフィールドにどのように値が保存されるか確認したいときは、オプションに「{show: 'show'}」を設定します。すると、テキストフィールドが表示されますので、当プラグインの動作や保存される値を確認することができます。

jQuery(function($){
    $('.multicheck2').multicheckbox({show:'show'});
});

チェンジログ

【2010-10-16】
これ移行のチェンジログは、Downloads - jquery-multicheckbox - Project Hosting on Google Codeのコメント欄をご覧ください。
【2010-08-27】
label オプションにオブジェクトを指定して、ラベル名と保存される値を変更できるようにしました。
【2010-06-23】
label オプションを追加しました。

jQuery Multi-checkboxに関するブログ記事

以上です。

トラックバック

トラックバックURL: http://www.tinybeans.net/cgi-bin/mt/mt-tb.cgi/887

コメント

コメントする