...

View Full Version : Gmail multiple checkbox selection with SHIFT?



eger
03-21-2005, 11:05 PM
Was wondering if anyone knows how gmail is using javascript to make use of the shift key for selecting a section of checkboxes in a row?

If you have gmail you can try this for yourself. With a list of many emails with checkboxes next to them. You can select the first checkbox, hold down SHIFT, then select a checkbox 6 rows down and it will select all checkboxes in between. You can also select another checkbox and do SHIFT select again for another group selection.

I have been trying to find some code that will do this. But have not found anything.

If anyone has any info on this I would appreciate it.

Thanks!

glenngv
03-22-2005, 02:49 AM
You're lucky it came as a code challenge (http://www.codingforums.com/showthread.php?t=13941) before. :)

eger
03-22-2005, 03:14 AM
Oh wow!

I think that is exactly what I was looking for. I see there are many code snippets there. I am sure I will find the one that is correct for me.

Thanks glenngv!

Tested these. None really do what im after. But maybe with a little hacking I can get them to.

I like the one that allows you to hold shift. I'm trying to get the effect gmail has where you can select multiple groups of checkboxes. These only seem to do single range with mouse over instead of checking a start stop range.

Again, if anyone has any ideas i'd appreciate it.

Harry Armadillo
03-22-2005, 05:08 AM
<html><head>
<script>
var oldInp=0;
function clickage(evt){
evt=(evt)?evt:event;
var target=(evt.target)?evt.target:evt.srcElement;
if(!evt.shiftKey){
oldInp=target.id.substr(5);
return false;
}
target.checked=1;
var low=Math.min(target.id.substr(5),oldInp);
var high=Math.max(target.id.substr(5),oldInp)
var uncheck=1;
for(var i=low;i<=high;i++){
uncheck &= document.getElementById('check'+i).checked;
document.getElementById('check'+i).checked=1;
}
if(uncheck){
for(i=low;i<=high;i++){
document.getElementById('check'+i).checked=0;
}
}
return true;
}
</script>
</head><body>
<script>
for(var i=0;i<30;i++)
document.write('<input type="checkbox" id="check'+i+'" onclick="clickage(event)">some text '+i+'<br>');
</script>
</body>
</html>

jkd
03-22-2005, 06:47 AM
This works in Mozilla and Opera:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Untitled</title>
<script type="text/javascript">//<![CDATA[
// Shift-click Checkboxes
// By Jason Davis, jasonkarldavis@gmail.com
// You may freely distribute this script as long as these credits remain intact
function enhanceCheckboxes(parent) {
parent._shiftKey = false;
parent._lastCheck = null;

parent.addEventListener("click", function(event) {
parent._shiftKey = event.shiftKey;
}, false);

parent.addEventListener("change", function(event) {
var currentIndex, checkbox, start, end;

if (event.target.nodeName.toUpperCase() == "LABEL") {
if (event.target.hasAttribute("for"))
checkbox = document.getElementById(event.target.getAttribute("for")) ||
document.getElementsByName(event.target.getAttribute("for")).item(0);
else
checkbox = event.target.getElementsByTagName("input").item(0);
}
else
checkbox = event.target;

if (parent._shiftKey && parent._lastCheck != null) {
for (var i = 0; i < checkbox.form.elements.length; i++) {
if (checkbox.form.elements[i] == checkbox) {
start = checkbox;
end = parent._lastCheck;
currentIndex = i;
break;
}
else if (checkbox.form.elements[i] == parent._lastCheck) {
start = parent._lastCheck;
end = checkbox;
currentIndex = i;
break;
}
}

for (currentIndex += 1; currentIndex < checkbox.form.elements.length && checkbox.form.elements[currentIndex] != end; currentIndex++) {
if (checkbox.form.elements[currentIndex].type == "checkbox") {
checkbox.form.elements[currentIndex].checked = true;
}
}

parent._lastCheck = end;
}
else
parent._lastCheck = checkbox;

parent._shiftKey = false;
}, false);
}


window.onload = function() {
enhanceCheckboxes(document.getElementsByTagName("form")[0]);
}
//]]></script>

</head>
<body>

<form action="submit.php">

<h3>Colors you like:</h3>
<label><input type="checkbox"/> Blue</label>
<label><input type="checkbox"/> Green</label>
<label><input type="checkbox"/> Yellow</label>
<label><input type="checkbox"/> Red</label>
<label><input type="checkbox"/> Pink</label>
<label><input type="checkbox"/> Orange</label>
<label><input type="checkbox"/> Magenta</label>
<label><input type="checkbox"/> Cyan</label>

<br/>
<input type="reset"/>

</form>
</body>
</html>


Certainly doesn't work in Win/IE, though I'm sure it is easily converted into attachEvent(). Also doesn't work in Safari, for no good reason.

Using onchange versus onclick gives the distinct advantage of being able to use labels to associate text to checkboxes, and still have the functionality work.

eger
03-22-2005, 06:43 PM
Hey thanks guys!

I think Harry Armadillo's code is a spot on match. Best of all it looks to be cross browser compliant (in IE and Firefox at least). I think this will be easily modified to fit in where I need it.

Thank you jkd and Harry and glenngv!

Harry Armadillo
03-22-2005, 09:36 PM
jdk, shift-click on one of your checkboxes twice in a row. ;)

jkd
03-23-2005, 12:07 AM
An excellent point. The following code includes that fix, and also allows shift-clicking to uncheck a range of boxes. :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Untitled</title>
<script type="text/javascript">//<![CDATA[
// Shift-click Checkboxes
// By Jason Davis, jasonkarldavis@gmail.com
// You may freely distribute this script as long as these credits remain intact
function enhanceCheckboxes(parent) {
parent._shiftKey = false;
parent._lastCheck = null;

parent.addEventListener("click", function(event) {
parent._shiftKey = event.shiftKey;
}, false);

parent.addEventListener("change", function(event) {
var currentIndex, checkbox, start, end;

if (event.target.nodeName.toUpperCase() == "LABEL") {
if (event.target.hasAttribute("for"))
checkbox = document.getElementById(event.target.getAttribute("for")) ||
document.getElementsByName(event.target.getAttribute("for")).item(0);
else
checkbox = event.target.getElementsByTagName("input").item(0);
}
else
checkbox = event.target;

if (parent._shiftKey && parent._lastCheck != null && parent._lastCheck != checkbox) {
for (var i = 0; i < checkbox.form.elements.length; i++) {
if (checkbox.form.elements[i] == checkbox) {
start = checkbox;
end = parent._lastCheck;
currentIndex = i;
break;
}
else if (checkbox.form.elements[i] == parent._lastCheck) {
start = parent._lastCheck;
end = checkbox;
currentIndex = i;
break;
}
}

for (currentIndex += 1; currentIndex < checkbox.form.elements.length && checkbox.form.elements[currentIndex] != end; currentIndex++) {
if (checkbox.form.elements[currentIndex].type == "checkbox") {
checkbox.form.elements[currentIndex].checked = checkbox.checked;
}
}

parent._lastCheck = end;
}
else
parent._lastCheck = checkbox;

parent._shiftKey = false;
}, false);
}


window.onload = function() {
enhanceCheckboxes(document.getElementsByTagName("form")[0]);
}
//]]></script>

</head>
<body>

<form action="submit.php">

<h3>Colors you like:</h3>
<label><input type="checkbox"/> Blue</label>
<label><input type="checkbox"/> Green</label>
<label><input type="checkbox"/> Yellow</label>
<label><input type="checkbox"/> Red</label>
<label><input type="checkbox"/> Pink</label>
<label><input type="checkbox"/> Orange</label>
<label><input type="checkbox"/> Magenta</label>
<label><input type="checkbox"/> Cyan</label>

<br/>
<input type="reset"/>

</form>


</body>
</html>

eger
03-23-2005, 12:25 AM
Hey Harry, try SHIFT selecting the same checkbox 2 times in firefox. Holding SHIFT and double clicking the box makes it disappear!

Harry Armadillo
03-23-2005, 12:44 AM
By design in mine; and now jkd's too, though the behavior is slightly different. Unchecking a range is just as useful as checking one.

eger
03-23-2005, 06:00 AM
Heh no no. I mean literally, when you hold shift and keep clicking a checkbox, the checkbox disappears from the page and is not there to check or uncheck anymore.

Try just holding shift and clicking the same checkbox in firefox. Maybe it's a bug for my version, wonder if i'm outdated.

Harry Armadillo
03-23-2005, 07:20 AM
Huh, strange. I click away as fast I could, and couldn't make it go vanish in either 1.0 or 1.0.1 ????

eger
03-28-2005, 06:52 PM
I wonder if it's a bug in Firefox 1.0.2. Tried on 3 different 1.0.2 machines and shift+dbl clicking checkboxes removes the box from the page. Very odd.

EDIT: Found the culprit. Seems to be conflicting with the Adblock plugin. Will have to check there now. Thanks for your contributions everyone!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum