Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。
■ 1.jQueryをダウンロード
からjQueryをダウンロードします。（ダウンロードしたファイル名を jquery.js とします。）
■ 2. jQuery Field Plug-inをダウンロード
http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm
から【jquery.field.js】をダウンロードします。
■ 3. 以下のようなチェックボックスを含むhtmlを用意します
<form action="" method="post"> <p> <input type="checkbox" name="user_id" id="chkRange_1" value="1" /> <label for="chkRange_1">Option 1</label> <input type="checkbox" name="user_id" id="chkRange_2" value="2" /> <label for="chkRange_2">Option 2</label> <input type="checkbox" name="user_id" id="chkRange_3" value="3" /> <label for="chkRange_3">Option 3</label> <input type="checkbox" name="user_id" id="chkRange_4" value="4" /> <label for="chkRange_4">Option 4</label> <input type="checkbox" name="user_id" id="chkRange_5" value="5" /> <label for="chkRange_5">Option 5</label> </p> </form>
■ 4. 用意したhtmlのヘッダに以下の記述を追加
（ j$ としているのはprototype.js とのコンフリクト回避のためです。）
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
j$(document).ready(
function (){
j$('input[@name="user_id"]').createCheckboxRange();
}
);
</script>
以上で「シフト+クリック」による複数選択が実行できます。
便利。
■ 似たようなのでこんなのもあります「shiftclick」
