【jQuery】Shift+クリックでチェックボックスを一括選択

Tweet

Category JavaScript 2017/11/17

問題

「始点クリック → Shift+終点クリック」でチェックボックスを範囲でチェックしたり、チェックを外したりしたい。

答え

こんな感じでどうでしょう。

<ul>
	<li><input type="checkbox" class="cbgroup1" value="1"> 北海道</li>
	<li><input type="checkbox" class="cbgroup1" value="2"> 東北地方</li>
	<li><input type="checkbox" class="cbgroup1" value="3"> 関東地方</li>
	<li><input type="checkbox" class="cbgroup1" value="4"> 中部地方</li>
	<li><input type="checkbox" class="cbgroup1" value="5"> 近畿地方</li>
	<li><input type="checkbox" class="cbgroup1" value="6"> 中国地方</li>
	<li><input type="checkbox" class="cbgroup1" value="7"> 四国地方</li>
	<li><input type="checkbox" class="cbgroup1" value="8"> 九州地方</li>
</ul>

<script>
	$(function(){
		var checked_last = null;
		$('.cbgroup1').on('click', function(event){
			if (event.shiftKey && checked_last) {
				var $targets = $('.cbgroup1');
				var p1 = $targets.index(checked_last)
				var p2 = $targets.index(this)
				for (var i = Math.min(p1, p2); i <= Math.max(p1, p2); ++i) {
					$targets.get(i).checked = checked_last.checked;
				}
			} else {
				checked_last = this;
			}
		});
	});
</script>

やっていることはこれだけなので、簡単なプログラムです

・クリックしたチェックボックスを都度記録する（始点になる）。
・Shiftを押しながらクリックした終点のチェックボックスまでの範囲のチェック状態を変更する。
・チェックを入れるのか外すのかは始点を基準にしている。

このような個所が画面の中に多数あるならば、プラグインとして書くと、後で使いやすいと思います。

デモ

• 北海道
• 東北地方
• 関東地方
• 中部地方
• 近畿地方
• 中国地方
• 四国地方
• 九州地方