範囲指定でチェックするjQueryプラグイン｜株式会社エン・ＰＣサービス - 東京都台東区蔵前のウェブアプリ・システム開発、ウェブサイト制作会社

Windowsのような操作で、チェックボックスをshiftキー範囲指定でまとめてチェック/解除できるjQueryプラグインです。

複数のチェックボックスを１つ１つポチポチするのが面倒と思い、範囲指定してまとめてチェックできるようなものを作ってみました。
jQueryプラグインの勉強がてら作ったものです。ご参考まで。

概要

複数あるチェックボックスを、WindowsのようにShiftキーで範囲選択&チェック出来るJavascriptです。jQueryが必要です。
ベースは SANsoft様サイトにて公開されていたものです。
チェックボックスの塊（グループ）が１つであれば動作したのですが、グループが複数あるときにうまく動作しなかったので、それを改良したものです。
範囲選択の挙動が若干しっくりこなかったので、そこも改良しています。
まずは、次のサンプルで動作をご確認下さい。

動作サンプル

グループ１

グループ1-1
グループ1-2
グループ1-3
グループ1-4
グループ1-5
グループ1-6
グループ1-7
グループ1-8
グループ1-9
グループ1-10

グループ２

グループ2-1
グループ2-2
グループ2-3
グループ2-4
グループ2-5

設置例

<html>
<head>
<script src="jquery.min.js"></script> // jQueryライブラリ(必須)
<script src="jquery.shiftcheckbox.js"></script> // 当ライブラリ(必須)
<script>
$(function () {
	$('.checkboxgroup').shiftcheckbox(); //複数グループがある場合はその数だけ追加して下さい
});
</script>
</head>
<body>
<label class="checkboxgroup"><input type="checkbox" name="group1[]" value="1" />チェック1</label>
<label class="checkboxgroup"><input type="checkbox" name="group1[]" value="2" />チェック2</label>
<label class="checkboxgroup"><input type="checkbox" name="group1[]" value="3" />チェック3</label>
<!--           ↑3.ここに指定したクラス名を書きます -->
</body>
</html>

‘.checkboxgroup’ は、チェックボックス（又は親要素）に指定したクラス名の事です。

範囲選択開始位置をクリック(チェック)後、Shiftキーを押しながら範囲終了箇所をクリック(チェック)してください。

選択開始位置がチェック解除となった場合は、範囲選択箇所すべてチェック解除となります。