2011-03-04, 23:43:04
HTML フォームの checkbox を選択できる上限を任意に設定するための処理を jQuery で書いてみた。指定数以上を選択したとき alert() でダイアログボックスを出す例はたくさんあるようだが、ここではダイアログボックスを出さずに選択済みのものをひとつ減らすようにしている。ダイアログボックスが出ないので、上限値を越えたときの選択操作が楽だと思う。
HTML の記述は次のようになる。class や id 属性の値はこのサンプルと同じである必要はなくて自由に設定して構わない。また name 属性はこの処理では使っていない。
<input type=”checkbox” class=”chkbox_cls” id=”chkbox_0″ name=”chkbox” value=”foo” onclick=”ltd_chkbox(this)” />foo
<input type=”checkbox” class=”chkbox_cls” id=”chkbox_1″ name=”chkbox” value=”bar” onclick=”ltd_chkbox(this)” />bar
：
<input type=”checkbox” class=”chkbox_cls” id=”chkbox_N” name=”chkbox” value=”baz” onclick=”ltd_chkbox(this)” />baz
それぞれの checkbox における onclick イベント発生時に呼び出すのが次の JavaScript 関数。変数 limit_len に選択可能な上限数を設定しておく。サンプルでは 3 としているので、仮に checkbox が 10 個あったとしても 3 個以上はチェックできない。4 個めをチェックするとすでにチェック済みのものから 1 個のチェックが自動的に外れる。コード中に jQuery() と記述している部分は、もちろん $() としても構わない。
function ltd_chkbox(obj) {
var limit_len = 3; # 選択可能な上限値
var attr_name = ‘.’ + jQuery(obj).attr(‘class’) + ‘:checked’;
var checked_len = jQuery(attr_name).length;
var tail = false;
for (var i = 0; i < checked_len; i++) {
if (jQuery(jQuery(attr_name)[i]).attr('id') == jQuery(obj).attr('id')
&& i == checked_len - 1) {
tail = true;
}
}
if (checked_len > limit_len) {
var idx = tail ? 0 : checked_len – 1;
jQuery(jQuery(attr_name)[idx]).attr(‘checked’, false);
}
}
2009-06-11, 13:00:59
川崎有亮さんが公開している「AjaxZip 2.0 – Ajax郵便番号→住所自動入力フォーム（CGI不要版）」に少しだけ手を加えて、住所をローマ字で表記するものを作ってみた。このサンプルとコードおよびローマ字表記用の住所データを下記のように公開している。
- 準備
-
1. 本家の ajaxzip2.js をインストールする。
2. 配布アーカイブ内の ajaxzip2/ajaxzip2r.js をインストール先の ajaxzip2.js と同じディレクトリに置く。
3. 配布アーカイブ内の ajaxzip2/data/zip-*-r.json をインストール先の data ディレクトリに置く。
4. 住所入力する HTML ファイルで ajaxzip2.js の代わりに ajaxzip2r.js を読み込む。
- 基本的な使い方
-
郵便番号の入力欄における onkeyup イベントハンドラとして AjaxZip2.zip2addr() を登録するのは本家と同じだが、新たに 7番目の引数として真値を設定するとローマ字表記の住所を得ることができる。また、この引数を偽値にすれば、本家と同じ動作となり漢字表記の住所が得られる。その他の引数の使い方は本家と同じだが、事業所の個別郵便番号に対するローマ字表記には対応していない。
- 郵便番号/住所辞書の更新
-
ローマ字表記の辞書は漢字辞書の名前に ‘-r’ を加えた zip-*-r.json という形式になっている。この辞書を更新するにはアーカイブにある ajaxzip2/work/csv2jsonzip_r.pl を使う。使い方は本家の csv2jsonzip.pl と同じだが、事業所の個別郵便番号には対応していない。また、csv2jsonzip_r.pl を動作させるためには、次の Perl モジュールが新たに必要となる。
・Lingua::JA::Kana
・Regexp::Assemble
・Unicode::Japanese
なお、Regexp::Assemble が無くても動作するように見えるが、撥音などのローマ字表記が期待通りにならないことがある。
- ローマ字表記の方法
-
住所をローマ字表記するため、日本郵便発行の元データに記載されている半角カタカナから Lingua::JA::Kana によってローマ字表記を得ている。元データでは都道府県名、市区町村名、町域名という3つ項目について半角カタカナが格納されているが、各項目内の表記は分かち書きされていない。そのため “サッポロシチュウオウク”（札幌市中央区）、”キタウオヌマグンカワグチマチ”（北魚沼郡川口町）のような住所データをそのままローマ字にすると、極めて読みにくいものになってしまう。そこで、市町村名と町域名に対しては何とか分かち書きをして、先の例ではそれぞれ ”Sapporo-shi Chuuou-ku”、”Kitauonuma-gun kawaguchi-machi” と表記できるようにした。ただし、かなり強引なやりかたで分かち書きをしているので、期待通りのローマ字表記にならないものがあると思う。
- その他
-
日本郵便発行の元データによると、郵便番号と住所は一対一に対応しているわけではなく、ひとつの郵便番号に対して複数の住所レコードが存在する場合がある。このような郵便番号に対して ajaxzip2r.js は常にひとつの同じ住所しか返さない。これは本家の ajaxzip2.js も同じである。
- ライセンス
-
MIT ライセンスとする。
