範囲指定でチェックするjQueryプラグイン

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

概要

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

動作サンプル

グループ１










グループ２






設置例

<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キーを押しながら範囲終了箇所をクリック(チェック)してください。

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

ダウンロード

jquery.shiftcheckbox.js

※上記リンクを右クリック「保存」でダウンロードしてください

更新履歴

  • 2016/11/10 jQueryバージョンupに伴う修正
  • 2012/08/14 チェックボックスクリア時の挙動がおかしいため修正
  • 2010/11/16 チェックボックスの親要素に該当クラス名を指定しても、動作するようにしました
  • 2010/06/10 初回公開

技術情報・簡易ウェブサービス一覧へ

OUR MISSION

理念

「ITで人を豊かにする」

私たちが開発したシステムやサービスを通じ、物心両面から豊かになってもらう。そして人生を楽しんでもらう。そこに私たちが存在する理由があります。
日々新たな製品・サービスを開発・ご提供し、最後まで誠意をもって取り組んで成果を出す。
ご縁を頂いた方やその先の人達に安心と満足をご提供出来る様、誠心誠意取り組んで参ります。

pageTop