Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gmail multiple checkbox selection with SHIFT?

    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!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 249 Times in 245 Posts
    You're lucky it came as a code challenge before.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by eger; 03-22-2005 at 03:48 AM.

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    This works in Mozilla and Opera:
    Code:
    <!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.

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jdk, shift-click on one of your checkboxes twice in a row.

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    An excellent point. The following code includes that fix, and also allows shift-clicking to uncheck a range of boxes.

    Code:
    <!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>

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Harry, try SHIFT selecting the same checkbox 2 times in firefox. Holding SHIFT and double clicking the box makes it disappear!

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Huh, strange. I click away as fast I could, and couldn't make it go vanish in either 1.0 or 1.0.1 ????

  • #13
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by eger; 03-28-2005 at 07:31 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •