Für ein Projekt wollte ich eine komfortable Möglichkeit mehrere Checkboxen mit zwei klicks und gedrückter Umschalt-Taste (shift-Taste) anzuhaken bzw. zu selektieren. Bei Google Mail war dies ja schon längere Zeit möglich und daher habe ich mich im Internet auf die Suche begeben. Allerdings sind die von mir gefundenen Lösungen von 2009 nicht kompatibel mit neueren Browsern bzw. neueren Frameworks. Deshalb habe ich die Inkompatibilitäten beseitigt und stelle Euch meine Lösung vor inkl. Demo-Page
Meine Lösung mit Javascript und JQuery 1.7.1, zu positionieren im Head-Bereich:
<script type=“text/javascript“ src=“jquery-1.7.1.min.js“></script>
<script>
$.fn.enableCheckboxRangeSelection = function() {
var lastCheckbox = null;
var $spec = this;
$spec.unbind(„click.checkboxrange“);
$spec.bind(„click.checkboxrange“, function(e) {
if (lastCheckbox != null && (e.shiftKey || e.metaKey)) {
$spec.slice(
Math.min($spec.index(lastCheckbox), $spec.index(e.target)),
Math.max($spec.index(lastCheckbox), $spec.index(e.target)) + 1
).prop({checked: e.target.checked ? „checked“ : „“});
}
lastCheckbox = e.target;
});
return $spec;
}; (jQuery);
$(document).ready(
function (){ $(„input.[name$=’testreihe‘]“).enableCheckboxRangeSelection();})
</script>
Und das Formular müsste so aussehen, mit anderen Selektoren auch anders möglich:
<input name=“1testreihe“ value=“1″ type=“checkbox“>
<input name=“2testreihe“ value=“1″ type=“checkbox“>
relativ einfach, hoffentlich ist das für den ein oder anderen nützlich und erspart Zeit. Die kl. Demo-Page, um mehrere Checkboxen mit gedrückter Umschalt-Taste anzuhaken.