lukemorton/jquery.shiftcheck.html

## jquery.shiftcheck.html
<!doctype html>
<html>
	<head>
		<title>Shift Check</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<h1>Shift Check</h1>
		<p>Try the following combos:</p>
		<ul>
			<li>Click a checkbox, hold shift and click another</li>
			<li>Focus a checkbox, hold shift and arrow up</li>
			<li>Focus a checkbox, hold shift and arrow down</li>
			<li>Focus a checkbox, press control and "a"</li>
		</ul>
		<form>
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<p><input type="checkbox" /></p>
			<p><input type="checkbox" /></p>
			<div><p><input type="checkbox" /></p></div>
			<input type="checkbox" />
			<fieldset>
				<p><input type="checkbox" /></p>
				<p>
					<input type="checkbox" />
					<input type="checkbox" />
				</p>
				<p>
					<input type="checkbox" />
					<input type="checkbox" />
				</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</fieldset>
			<button id="uncheck">Uncheck Boxes</button>
		</form>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
		<script src="jquery.shiftcheck.js"></script>
		<script>
			jQuery(function ($) {
				$("form").shiftCheck();

				$("#uncheck").click(function (e) {
					e.preventDefault();
					$("input").attr("checked", false);
				});
			});
		</script>
	</body>
</html>

## jquery.shiftcheck.js
(function ($) {
	$.shiftCheck = {};
	$.shiftCheck.globalSettings = {
		"inputCheckor" : "input[type='checkbox']"
	};

	/**
	 * Use shift check like so:
	 *     $('form').shiftCheck();
	 *     $('form').shiftCheck('input.shiftCheck');
	 *     $('form').shiftCheck({"inputCheckor" : "input.shiftCheck"});
	 */
	$.fn.shiftCheck = function (settings) {

		// If string, it is inputCheckor
		if (typeof settings === "string") {
			settings = {
				"inputCheckor" : settings
			};

		// Otherwise if empty
		} else if ( ! settings) {
			settings = {};
		}

		// Merge global and local settings
		settings = $.extend({}, $.shiftCheck.globalSettings, settings);

		// For each container
		return this.each(function () {
			var $container = $(this);
			var $inputs = $container.find(settings.inputCheckor);
			var startIndex = 0;
			var startClickIndex = 0;
			var endIndex = 0;
			var $lastFocus;
			var checkInput = function (index) {
				var checkInput;

				if (startIndex <= endIndex) {
					checkInput = index >= startIndex && index <= endIndex;
				} else {
					checkInput = index <= startIndex && index >= endIndex;
				}

				$(this).attr("checked", checkInput);
			};

			$container.delegate(settings.inputCheckor, "focus", function (e) {
				startIndex = endIndex = $inputs.index(this);
			});

			$container.delegate(settings.inputCheckor, "click", function (e) {
				// If no or only shift key pressed, startIndex
				if ( ! e.shiftKey || e.which === 16) {
					startClickIndex = $inputs.index(this);
					return;
				}

				startIndex = startClickIndex;

				// Otherwise endIndex
				endIndex = $inputs.index(this);

				// And highlight
				$inputs.each(checkInput);
			});

			$container.delegate(settings.inputCheckor, "keydown", function (e) {
				// Control + A bonus
				if (e.ctrlKey && e.which === 65) {
					e.preventDefault();
					$inputs.attr("checked", true);
					return;
				}

				if ( ! e.shiftKey || e.which === 16) {
					// End now if shift key not down
					// or just shift key down
					return;
				}

				// If up or down
				if (e.which === 40 || e.which === 38) {

					// Down
					if (e.which === 40) {
						endIndex++;

						// Constrain
						if (endIndex > $inputs.length) {
							endIndex = $inputs.length - 1;
						}

					// Up
					} else if (e.which === 38) {
						endIndex--;

						// Constrain
						if (endIndex < 0) {
							endIndex = 0;
						}
					}

					e.preventDefault();
					$inputs.each(checkInput);
				}
			});
		});
	};
}(jQuery));
	<!doctype html>
	<html>
	<head>
	<title>Shift Check</title>
	<meta charset="utf-8" />
	</head>
	<body>
	<h1>Shift Check</h1>
	<p>Try the following combos:</p>
	<ul>
	<li>Click a checkbox, hold shift and click another</li>
	<li>Focus a checkbox, hold shift and arrow up</li>
	<li>Focus a checkbox, hold shift and arrow down</li>
	<li>Focus a checkbox, press control and "a"</li>
	</ul>
	<form>
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<p><input type="checkbox" /></p>
	<p><input type="checkbox" /></p>
	<div><p><input type="checkbox" /></p></div>
	<input type="checkbox" />
	<fieldset>
	<p><input type="checkbox" /></p>
	<p>
	<input type="checkbox" />
	<input type="checkbox" />
	</p>
	<p>
	<input type="checkbox" />
	<input type="checkbox" />
	</p>
	<p><input type="checkbox" /></p>
	<p><input type="checkbox" /></p>
	</fieldset>
	<button id="uncheck">Uncheck Boxes</button>
	</form>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
	<script src="jquery.shiftcheck.js"></script>
	<script>
	jQuery(function ($) {
	$("form").shiftCheck();

	$("#uncheck").click(function (e) {
	e.preventDefault();
	$("input").attr("checked", false);
	});
	});
	</script>
	</body>
	</html>
	(function ($) {
	$.shiftCheck = {};
	$.shiftCheck.globalSettings = {
	"inputCheckor" : "input[type='checkbox']"
	};

	/**
	* Use shift check like so:
	* $('form').shiftCheck();
	* $('form').shiftCheck('input.shiftCheck');
	* $('form').shiftCheck({"inputCheckor" : "input.shiftCheck"});
	*/
	$.fn.shiftCheck = function (settings) {

	// If string, it is inputCheckor
	if (typeof settings === "string") {
	settings = {
	"inputCheckor" : settings
	};

	// Otherwise if empty
	} else if ( ! settings) {
	settings = {};
	}

	// Merge global and local settings
	settings = $.extend({}, $.shiftCheck.globalSettings, settings);

	// For each container
	return this.each(function () {
	var $container = $(this);
	var $inputs = $container.find(settings.inputCheckor);
	var startIndex = 0;
	var startClickIndex = 0;
	var endIndex = 0;
	var $lastFocus;
	var checkInput = function (index) {
	var checkInput;

	if (startIndex <= endIndex) {
	checkInput = index >= startIndex && index <= endIndex;
	} else {
	checkInput = index <= startIndex && index >= endIndex;
	}

	$(this).attr("checked", checkInput);
	};

	$container.delegate(settings.inputCheckor, "focus", function (e) {
	startIndex = endIndex = $inputs.index(this);
	});

	$container.delegate(settings.inputCheckor, "click", function (e) {
	// If no or only shift key pressed, startIndex
	if ( ! e.shiftKey \|\| e.which === 16) {
	startClickIndex = $inputs.index(this);
	return;
	}

	startIndex = startClickIndex;

	// Otherwise endIndex
	endIndex = $inputs.index(this);

	// And highlight
	$inputs.each(checkInput);
	});

	$container.delegate(settings.inputCheckor, "keydown", function (e) {
	// Control + A bonus
	if (e.ctrlKey && e.which === 65) {
	e.preventDefault();
	$inputs.attr("checked", true);
	return;
	}

	if ( ! e.shiftKey \|\| e.which === 16) {
	// End now if shift key not down
	// or just shift key down
	return;
	}

	// If up or down
	if (e.which === 40 \|\| e.which === 38) {

	// Down
	if (e.which === 40) {
	endIndex++;

	// Constrain
	if (endIndex > $inputs.length) {
	endIndex = $inputs.length - 1;
	}

	// Up
	} else if (e.which === 38) {
	endIndex--;

	// Constrain
	if (endIndex < 0) {
	endIndex = 0;
	}
	}

	e.preventDefault();
	$inputs.each(checkInput);
	}
	});
	});
	};
	}(jQuery));