<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Checkbox Range Selection (a la GMail)</title>
	<atom:link href="http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/</link>
	<description>Thoughts, rants, and even some code from the mind of Barney Boisvert.</description>
	<lastBuildDate>Thu, 11 Sep 2014 09:58:12 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: Psyke</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-322520</link>
		<dc:creator>Psyke</dc:creator>
		<pubDate>Tue, 18 Sep 2012 15:09:51 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-322520</guid>
		<description>I think the code should be changed from:

&lt;pre&gt;.attr({checked: e.target.checked ? &quot;checked&quot; : &quot;&quot;});&lt;/pre&gt;

to

&lt;pre&gt;.attr({checked: e.target.checked });&lt;/pre&gt;

You don&#039;t need the &quot;checked&quot; or &quot;&quot;, simply true or false with attributed checked is good.  People also need to understand that the first &quot;checked&quot; is a string not a variable (for those who didn`t know).  Using &quot;checked&quot; and &quot;&quot; instead of true or false, was making my code bug thus i couldn&#039;t uncheck my boxes.</description>
		<content:encoded><![CDATA[<p>I think the code should be changed from:</p>
<pre>.attr({checked: e.target.checked ? "checked" : ""});</pre>
<p>to</p>
<pre>.attr({checked: e.target.checked });</pre>
<p>You don't need the "checked" or "", simply true or false with attributed checked is good.  People also need to understand that the first "checked" is a string not a variable (for those who didn`t know).  Using "checked" and "" instead of true or false, was making my code bug thus i couldn't uncheck my boxes.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Laszlo</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-317620</link>
		<dc:creator>Laszlo</dc:creator>
		<pubDate>Tue, 24 Jul 2012 13:53:04 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-317620</guid>
		<description>Thanks a lot! I needed to customize because i have ajax function when clicking a checkbox. I added a section to launch the ajax commands:

&lt;pre&gt;(function ($) {
    $.fn.enableCheckboxRangeSelection_custom = function () {
        var lastCheckbox = null;
        var $spec = this;
        $spec.unbind(&quot;click.checkboxrange&quot;);
        $spec.bind(&quot;click.checkboxrange&quot;, function (e) {
            var alreadyChecked = true;
            var currentTarget = e.target;
            if (typeof currentTarget.htmlFor !== &#039;undefined&#039;)
            {
                currentTarget = document.getElementById(currentTarget.htmlFor);
                alreadyChecked = false;
            }
            if (lastCheckbox != null &amp;&amp; (e.shiftKey &#124;&#124; e.metaKey)) {
                var elements = $spec.slice(
                Math.min($spec.index(lastCheckbox), $spec.index(currentTarget)),
                Math.max($spec.index(lastCheckbox), $spec.index(currentTarget)) + 1
                );
                
                //begin added by Laszlo
                elements.each(function(index, elem){
                      var _name = $(elem).attr(&quot;name&quot;);
                      //you can do anithing with jQuery here, call other functions, etc...
                  }
                //end added by Laszlo

                });
                if (currentTarget.checked == alreadyChecked){
                    elements.attr({ checked:&quot;checked&quot;});
                }
                else{
                    elements.removeAttr(&quot;checked&quot;);
                }
    
            }
            lastCheckbox = currentTarget;

            //Hack: Reset the value of the input when a label is clicked and then trigger the click of the input self. Now this solution is compatible with events on that input (like a custom change event)

            if (!alreadyChecked &amp;&amp; (e.shiftKey &#124;&#124; e.metaKey)){
                e.preventDefault();
                if (currentTarget.checked == true){
                    $(currentTarget).removeAttr(&quot;checked&quot;);
                }
                else{
                    $(currentTarget).attr({ checked:&quot;checked&quot;});
                }
                currentTarget.click();
            }

            return true;
        });
    };
})(jQuery);
&lt;/pre&gt;

don&#039;t forget to init the function when document.ready:
&lt;pre&gt;$(&quot;input:checkbox&quot;).enableCheckboxRangeSelection_custom();&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>Thanks a lot! I needed to customize because i have ajax function when clicking a checkbox. I added a section to launch the ajax commands:</p>
<pre>(function ($) {
    $.fn.enableCheckboxRangeSelection_custom = function () {
        var lastCheckbox = null;
        var $spec = this;
        $spec.unbind("click.checkboxrange");
        $spec.bind("click.checkboxrange", function (e) {
            var alreadyChecked = true;
            var currentTarget = e.target;
            if (typeof currentTarget.htmlFor !== 'undefined')
            {
                currentTarget = document.getElementById(currentTarget.htmlFor);
                alreadyChecked = false;
            }
            if (lastCheckbox != null &amp;&amp; (e.shiftKey || e.metaKey)) {
                var elements = $spec.slice(
                Math.min($spec.index(lastCheckbox), $spec.index(currentTarget)),
                Math.max($spec.index(lastCheckbox), $spec.index(currentTarget)) + 1
                );

                //begin added by Laszlo
                elements.each(function(index, elem){
                      var _name = $(elem).attr("name");
                      //you can do anithing with jQuery here, call other functions, etc...
                  }
                //end added by Laszlo

                });
                if (currentTarget.checked == alreadyChecked){
                    elements.attr({ checked:"checked"});
                }
                else{
                    elements.removeAttr("checked");
                }

            }
            lastCheckbox = currentTarget;

            //Hack: Reset the value of the input when a label is clicked and then trigger the click of the input self. Now this solution is compatible with events on that input (like a custom change event)

            if (!alreadyChecked &amp;&amp; (e.shiftKey || e.metaKey)){
                e.preventDefault();
                if (currentTarget.checked == true){
                    $(currentTarget).removeAttr("checked");
                }
                else{
                    $(currentTarget).attr({ checked:"checked"});
                }
                currentTarget.click();
            }

            return true;
        });
    };
})(jQuery);
</pre>
<p>don't forget to init the function when document.ready:</p>
<pre>$("input:checkbox").enableCheckboxRangeSelection_custom();</pre>
]]></content:encoded>
	</item>
	<item>
		<title>By: Anne</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-315597</link>
		<dc:creator>Anne</dc:creator>
		<pubDate>Fri, 29 Jun 2012 11:04:00 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-315597</guid>
		<description>I know this is an old thread, but i was inspired by the function of the original post. Still it didnt work exactly like the solution gmail uses.

I experimented a lot these 2 days to get the same behavior gamail uses and figured out how to get a correct implementation. Be aware: The code is much longer :(

Solution is cross browser compatible

&lt;pre&gt;(function ($) {
    $.fn.enableCheckboxRangeSelection = function () {
        var lastCheckbox = null;
        var $spec = this;
        $spec.unbind(&quot;click.checkboxrange&quot;);
        $spec.bind(&quot;click.checkboxrange&quot;, function (e) { 
            var alreadyChecked = true;    
            var currentTarget = e.target;
            if (typeof currentTarget.htmlFor !== &#039;undefined&#039;)
            {
                currentTarget = document.getElementById(currentTarget.htmlFor);
                alreadyChecked = false;
            }
            if (lastCheckbox != null &amp;&amp; (e.shiftKey &#124;&#124; e.metaKey)) {
                var elements = $spec.slice(
                Math.min($spec.index(lastCheckbox), $spec.index(currentTarget)),
                Math.max($spec.index(lastCheckbox), $spec.index(currentTarget)) + 1
                );
                if (currentTarget.checked == alreadyChecked){
                    elements.attr({ checked:&quot;checked&quot;});
                }
                else{
                    elements.removeAttr(&quot;checked&quot;);
                }
            }
            lastCheckbox = currentTarget;

            //Hack: Reset the value of the input when a label is clicked and then trigger the click of the input self. Now this solution is compatible with events on that input (like a custom change event)
            
            if (!alreadyChecked &amp;&amp; (e.shiftKey &#124;&#124; e.metaKey)){
                e.preventDefault();
                if (currentTarget.checked == true){
                    $(currentTarget).removeAttr(&quot;checked&quot;);
                }
                else{
                    $(currentTarget).attr({ checked:&quot;checked&quot;});
                }
                currentTarget.click();
            }
            
            return true;
        });        
    };
})(jQuery);
&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>I know this is an old thread, but i was inspired by the function of the original post. Still it didnt work exactly like the solution gmail uses.</p>
<p>I experimented a lot these 2 days to get the same behavior gamail uses and figured out how to get a correct implementation. Be aware: The code is much longer :(</p>
<p>Solution is cross browser compatible</p>
<pre>(function ($) {
    $.fn.enableCheckboxRangeSelection = function () {
        var lastCheckbox = null;
        var $spec = this;
        $spec.unbind("click.checkboxrange");
        $spec.bind("click.checkboxrange", function (e) {
            var alreadyChecked = true;
            var currentTarget = e.target;
            if (typeof currentTarget.htmlFor !== 'undefined')
            {
                currentTarget = document.getElementById(currentTarget.htmlFor);
                alreadyChecked = false;
            }
            if (lastCheckbox != null &amp;&amp; (e.shiftKey || e.metaKey)) {
                var elements = $spec.slice(
                Math.min($spec.index(lastCheckbox), $spec.index(currentTarget)),
                Math.max($spec.index(lastCheckbox), $spec.index(currentTarget)) + 1
                );
                if (currentTarget.checked == alreadyChecked){
                    elements.attr({ checked:"checked"});
                }
                else{
                    elements.removeAttr("checked");
                }
            }
            lastCheckbox = currentTarget;

            //Hack: Reset the value of the input when a label is clicked and then trigger the click of the input self. Now this solution is compatible with events on that input (like a custom change event)

            if (!alreadyChecked &amp;&amp; (e.shiftKey || e.metaKey)){
                e.preventDefault();
                if (currentTarget.checked == true){
                    $(currentTarget).removeAttr("checked");
                }
                else{
                    $(currentTarget).attr({ checked:"checked"});
                }
                currentTarget.click();
            }

            return true;
        });
    };
})(jQuery);
</pre>
]]></content:encoded>
	</item>
	<item>
		<title>By: Pete</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-209548</link>
		<dc:creator>Pete</dc:creator>
		<pubDate>Fri, 02 Apr 2010 03:42:55 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-209548</guid>
		<description>By putting the LastCheckBox assignment inside an ELSE clause, you can toggle the selected checkboxes by shift-clicking again.

&lt;pre&gt;if (lastCheckbox != null &amp;&amp; (e.shiftKey &#124;&#124; e.metaKey)) {
  ...... 
} else {
  lastCheckbox = e.target;   &lt;-----
}&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>By putting the LastCheckBox assignment inside an ELSE clause, you can toggle the selected checkboxes by shift-clicking again.</p>
<pre>if (lastCheckbox != null &amp;&amp; (e.shiftKey || e.metaKey)) {
  ......
} else {
  lastCheckbox = e.target;   &lt;-----
}</pre>
]]></content:encoded>
	</item>
	<item>
		<title>By: scorphus</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-194015</link>
		<dc:creator>scorphus</dc:creator>
		<pubDate>Fri, 23 Oct 2009 20:32:57 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-194015</guid>
		<description>Works charmingly well! Thank you very much!</description>
		<content:encoded><![CDATA[<p>Works charmingly well! Thank you very much!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: barneyb</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-164737</link>
		<dc:creator>barneyb</dc:creator>
		<pubDate>Sat, 28 Feb 2009 17:46:34 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-164737</guid>
		<description>Henrik,

Cool.  Attribution is perfectly fine as-is.  I&#039;m not a licensing nazi, even though I probably should be.</description>
		<content:encoded><![CDATA[<p>Henrik,</p>
<p>Cool.  Attribution is perfectly fine as-is.  I'm not a licensing nazi, even though I probably should be.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Henrik N</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-164688</link>
		<dc:creator>Henrik N</dc:creator>
		<pubDate>Sat, 28 Feb 2009 07:58:42 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-164688</guid>
		<description>Barney, I made &lt;a href=&quot;http://gist.github.com/71378&quot; rel=&quot;nofollow&quot;&gt;Gist&lt;/a&gt; with my modifications to this method as well as some other useful checkbox methods. I linked back here â€“ let me know if your code is under some specific license or you want me to change how I credit you.</description>
		<content:encoded><![CDATA[<p>Barney, I made <a href="http://gist.github.com/71378" rel="nofollow">Gist</a> with my modifications to this method as well as some other useful checkbox methods. I linked back here â€“ let me know if your code is under some specific license or you want me to change how I credit you.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: barneyb</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-141363</link>
		<dc:creator>barneyb</dc:creator>
		<pubDate>Sun, 16 Nov 2008 19:37:12 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-141363</guid>
		<description>Thanks Henrik.  I didn&#039;t know you could &quot;name&quot; handlers like that - very handy.  I&#039;ve updated the code in the post with both of your suggestions.</description>
		<content:encoded><![CDATA[<p>Thanks Henrik.  I didn't know you could "name" handlers like that &#8211; very handy.  I've updated the code in the post with both of your suggestions.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Henrik N</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-141256</link>
		<dc:creator>Henrik N</dc:creator>
		<pubDate>Sun, 16 Nov 2008 10:59:42 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-141256</guid>
		<description>I also changed e.shiftKey to (e.shiftKey &#124;&#124; e.metaKey) so Command (in OS X) can be used in addition to Shift. Feels better somehow.</description>
		<content:encoded><![CDATA[<p>I also changed e.shiftKey to (e.shiftKey || e.metaKey) so Command (in OS X) can be used in addition to Shift. Feels better somehow.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Henrik N</title>
		<link>https://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/comment-page-1/#comment-141251</link>
		<dc:creator>Henrik N</dc:creator>
		<pubDate>Sun, 16 Nov 2008 10:49:15 +0000</pubDate>
		<guid isPermaLink="false">http://www.barneyb.com/barneyblog/2008/01/08/checkbox-range-selection-a-la-gmail/#comment-141251</guid>
		<description>Thanks for this.

I made a slight modification, namespacing the click event (so it can be unbound unambiguously) and unbinding it before reapplying.

http://pastie.textmate.org/316003

I have checkboxes in drag-and-drop sortables. This way, I can re-apply enableCheckboxRangeSelection after sorting to get the order right.</description>
		<content:encoded><![CDATA[<p>Thanks for this.</p>
<p>I made a slight modification, namespacing the click event (so it can be unbound unambiguously) and unbinding it before reapplying.</p>
<p><a href="http://pastie.textmate.org/316003" rel="nofollow">http://pastie.textmate.org/316003</a></p>
<p>I have checkboxes in drag-and-drop sortables. This way, I can re-apply enableCheckboxRangeSelection after sorting to get the order right.</p>
]]></content:encoded>
	</item>
</channel>
</rss>
