marcar varios checkbox con tecla shift
Bueno, volvemos con este blog, tuve que dejar bloxsom que lo tenía en mi equipo hasta conseguir un equipo que pueda dedicar para postear (y tener control total del blog) , no me gusta mucho la idea de usar blogspot.
Hace unos días vi el articulo Check it, don't select it, donde recomiendan por usabilidad y accesibilidad, usar listas de checkbox en caso de selección múltiple en vez de un select con el atributo "multiple", el resultado me gustó. Conversando con grunch discutíamos las ventajas/desventajas, en esa salio el hecho de que con el select multiple, al usar la tecla shift, se pueden marcar varias opciones sin mucho esfuerzo, solo marcando un "desde" y "hasta", recordé que ese es el comportamiento de gmail y decidí hacerlo a mi manera con jquery, una librería de javascript que me está gustando bastante (de las que he usado... la que considero mas intuitiva, y el hecho que trabaje gran cantidad de plugins (algunos los llaman widgets) y sea muy ligera, le da puntos a favor).
Hace unos días vi el articulo Check it, don't select it, donde recomiendan por usabilidad y accesibilidad, usar listas de checkbox en caso de selección múltiple en vez de un select con el atributo "multiple", el resultado me gustó. Conversando con grunch discutíamos las ventajas/desventajas, en esa salio el hecho de que con el select multiple, al usar la tecla shift, se pueden marcar varias opciones sin mucho esfuerzo, solo marcando un "desde" y "hasta", recordé que ese es el comportamiento de gmail y decidí hacerlo a mi manera con jquery, una librería de javascript que me está gustando bastante (de las que he usado... la que considero mas intuitiva, y el hecho que trabaje gran cantidad de plugins (algunos los llaman widgets) y sea muy ligera, le da puntos a favor).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="librerias/jquery/jquery-1.1.2.js"> </script>
<script type="text/javascript" >
$(document).ready(function(){
var checkAnterior;
$("input").click(function(event){
// se toma el valor actual del check marcado
checkActual = parseInt(this.id.substr(2));
// se guarda el estado de la tecla shift (devuelve un booleano)
eventoShift = event.shiftKey;
if (eventoShift){ // si presiono shift
if (checkAnterior < checkActual ){
// si el anterior es meno que el actual se hace un marcado en forma acendente
for ( i = checkAnterior ; i <= checkActual ; i++ ){
// concateno la cadena fija del nombre del check con su variable
elemento = "#w_"+i;
// usando jquery, le asigno el atributo checked=true para marcarlo
$(elemento).attr("checked","true");
}
}else if(checkAnterior > checkActual){
// si el anterior es mayor que el actual se hace un marcado en forma decreciente
for ( i = checkAnterior ; i >= checkActual ; i-- ){
elemento = "#w_"+i;
$(elemento).attr("checked","true");
}
}
}
checkAnterior = parseInt(this.id.substr(2));
});
});
</script>
<title> dvst @ vim </title>
</head>
<body>
<form action="" method="post" name="form1" id="form1"><br>
<label for="w_1"><input type="checkbox" id="w_1" name="w_1" /> Elemento 1 </label><br>
<label for="w_2"><input type="checkbox" id="w_2" name="w_2" /> Elemento 2</label><br>
<label for="w_3"><input type="checkbox" id="w_3" name="w_3" /> Elemento 3</label><br>
<label for="w_4"><input type="checkbox" id="w_4" name="w_4" /> Elemento 4</label><br>
<label for="w_5"><input type="checkbox" id="w_5" name="w_5" /> Elemento 5</label><br>
<label for="w_6"><input type="checkbox" id="w_6" name="w_6" /> Elemento 6</label><br>
<label for="w_7"><input type="checkbox" id="w_7" name="w_7" /> Elemento 7</label><br>
</form>
</body>
</html>
El efecto se ve mejor si se hace click sobre los checks, al darle click en las etiquetas funciona también, pero estas se sombrean.
Referencias: DOM:event.shiftKey
Este es uno de los tantos scripts que se me ocurren a diario y quisiera compartir, espero algún día llegar a tener un SOTD (script of the day). Si tienes una idea interesante (y mas aún... útil) para algún script (javascript mas que todo) y no sabes como hacerlo, enviarla a templeofdvst AT NOSPAM gmail (dot) com , así, si me parece interesante (y si lo resuelvo :P) lo publico por acá :)
Saludos.
Referencias: DOM:event.shiftKey
Este es uno de los tantos scripts que se me ocurren a diario y quisiera compartir, espero algún día llegar a tener un SOTD (script of the day). Si tienes una idea interesante (y mas aún... útil) para algún script (javascript mas que todo) y no sabes como hacerlo, enviarla a templeofdvst AT NOSPAM gmail (dot) com , así, si me parece interesante (y si lo resuelvo :P) lo publico por acá :)
Saludos.
posted by Javier E. Perez P. at 1:16 a.m.
1 Comments:
excelente dvst lo lograste :) ya me voy a chorear ese código jeje, saludos
Publicar un comentario
<< Home