Last modified date : 2019/01/31

実際のデータは、チェックされたチェックボックスの value がカンマ区切りで元のフィールドに、表示されているチェックボックスの順序に従って保存されます。

使い方

$.MTAppMultiCheckbox({
  basename: '',
  label: '',
  insert: 'before',
  custom: false,
  add: false,
  skin: '',
  sort: '',
  debug: false
});

オプション設定は下記の通りです。basename、label は必須です。

サンプル

例えば、タグ欄を「Moveble Type,MTOS,PowerCMS,MTAppjQuery」という4つのラベルのチェックボックスにして、保存される値を「movabletype,mtos,powercms,mtappjquery」とし、フィールドの順番を昇順(sort: 'ascend')にし、保存された値を確認( debug: true )する場合は以下のようなコードになります。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label:    {
      'movabletype': 'Movable Type',
      'mtos': 'MTOS',
      'powercms': 'PowerCMS',
      'mtappjquery': 'MTAppjQuery'
    },
    sort: 'ascend',
    debug: true
});

オプション

$.MTAppMultiCheckbox({
    "basename": "",
    "label": "",
    "custom": false,
    "debug": false,
    "skin": "",
    "sort": "",
    "add": false,
    "maxCount": 999999999,
    "maxCountMessage": ""
});

basename

Type : String, Default :

複数選択チェックボックスにするフィールドのベースネームを設定します。

$.MTAppMultiCheckbox() が使えるのはテキストフィールド input:text 、テキストエリア textarea です。したがって、デフォルトのフィールドでは、以下のベースネームのフィールドをマルチチェックボックスにすることができます。

  • title : タイトル
  • tags : タグ
  • keywords : キーワード
  • excerpt : 概要

テキストフィールド、テキストエリアのタイプのカスタムフィールドも複数選択チェックボックスにすることができます。カスタムフィールドのベースネームは、カスタムフィールドの編集画面で確認できます。

もし Firebug などを使って直接ソースで確認する場合は、そのフィールドの一番親の div 要素の id 属性から確認できます。以下の例で言えば「price」がベースネームになります。

<div id="customfield_price-field" class="field field-top-label ">
    省略
</div>

label

Type : String,Plane Object, Default :

チェックボックスのラベルをカンマ区切りの文字列か { value1 : label1, value2 : label2 } のオブジェクトで設定します。

カンマ区切りの文字列を指定した場合は、指定した順番にチェックボックスが作成され、チェックボックスのラベルと保存される値が同一になります。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'Moveble Type,TypePad,MTOS,VOX'
});

{ value1 : label1, value2 : label2 } のオブジェクトで指定した場合は、value1、value2 が保存される値になり、label1、label2 がラベルとなります。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label:    {
      'movabletype': 'Movable Type',
      'mtos': 'MTOS',
      'powercms': 'PowerCMS',
      'mtappjquery': 'MTAppjQuery'
    },
    debug: true
});

custom

Type : Boolean, Default : false

複数選択チェックボックスにするフィールドがカスタムフィールドの場合のみ true を設定します。

$.MTAppMultiCheckbox({
    basename: 'mtappmulticheckbox',
    label: 'Moveble Type,TypePad,MTOS,VOX',
    custom: true
});

なお、カスタムフィールドでも custom オプションではなく、次のように直接ベースネームで指定することもできます。

$.MTAppMultiCheckbox({
    basename: 'customfield_mtappmulticheckbox',
    label: 'Moveble Type,TypePad,MTOS,VOX'
});

debug

Type : Boolean, Default : false

true を設定すると、元のテキストフィールドが表示されます。制作中に、どのような値が保存されるかを確認する際にお使いください。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'Moveble Type,TypePad,MTOS,VOX',
    debug: true
});

skin

Type : String, Default :

skin: 'tags' を設定すると、チェックボックスではなく下図のようなデザインが適用されます。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'Moveble Type,TypePad,MTOS,VOX',
    skin: 'tags'
});

sort

Type : String, Default :

ascend (昇順)または descend (降順)を設定すると、label で指定した値がソートされて表示されます。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'Moveble Type,TypePad,MTOS,VOX',
    sort: 'ascend'
});

add

Type : Boolean, Default : false

add: true を設定すると、ユーザーが項目を自由に増やせるようになります。
ただし、このユーザーが増やした値は、その値がチェックされ保存された場合は次回もそのフィールドに表示されますが、他のブログ記事など値が保存されていないフィールドには表示されません。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'Moveble Type,TypePad,MTOS,VOX',
    add: true
});

maxCount v1.8.0

Type : Number, Default : 999999999

チェックボックスが複数あるとき、チェック出来る最大数を設定します。

maxCountMessage v1.8.0

Type : String, Default :

チェック出来る最大数を超えてチェックした場合に表示されるアラートメッセージを設定します。

$.MTAppMultiCheckbox({
    basename: 'tags',
    label: 'Moveble Type,TypePad,MTOS,VOX',
    add: true,
    maxCount: 2,
    maxCountMessage: '最大2つまで選択できます'
});