ShiftCheckbox – jQuery Plugin

shiftcheckbox permite a los usuarios para seleccionar el rango de casillas de verificación, haga click en una casilla y, a continuación, SHIFT + click en la última casilla de verificación deseada. Todas las casillas entre la primera y la última se seleccionaran.

Para este ejemplo tendremos que descargar el plugin e incluirlo en el head de nuestra pagina.

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.shiftcheckbox.js"></script>

Luego incluimos el código que relizara todo el proceso mediante el class del checkbox.

$(document).ready (
	function () {
  	$.shiftcheckbox.init('shiftchk');
});

Ahora tendremos que poner el class ‘shiftchk’ a las casillas de verificación.

<input name="chk1" value="1" class="input shiftchk" type="checkbox">1 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">2 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">3 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">4 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">5 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">6 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">7 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">8 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">9 Item<br>
<input name="chk1" value="1" class="input shiftchk" type="checkbox">10 Item<br>

Eso es todo lo necesario, código limpio, no obstrusivo en nuestra web.

Recursos

También te puede interesar