Browse: Home / , , / Checkbox Range Selection Update

Checkbox Range Selection Update

By barneyb on May 12, 2008

Just a little update to my checkbox range selection jQuery plugin to allow chaining.  I'd forgotten to return 'this' at the end of the function.  Here's the full source, including the mod:

(function($) {
  $.fn.enableCheckboxRangeSelection = function() {
    var lastCheckbox = null;
    var $spec = this;
    $spec.bind("click", function(e) {
      if (lastCheckbox != null && e.shiftKey) {
        $spec.slice(
          Math.min($spec.index(lastCheckbox), $spec.index(e.target)),
          Math.max($spec.index(lastCheckbox), $spec.index(e.target)) + 1
        ).attr({checked: e.target.checked ? "checked" : ""});
      }
      lastCheckbox = e.target;
    });
    return $spec;
  };
})(jQuery);

You can check the project page as well, for full history and updates.

Posted in , ,

8 responses to “Checkbox Range Selection Update”

  1. Michael Heilemann
    Michael Heilemann
    August 23, 2008 at 2:45 pm |

    I'm looking for just this block of code for use in Habari–short and sweet. Any chance you'll let me? :)

  2. barneyb
    barneyb
    August 24, 2008 at 5:04 am |

    Michael,

    Of course, have at it.

  3. Michael Heilemann
    Michael Heilemann
    August 24, 2008 at 5:05 am |

    Awesome, thank you.

  4. Richie
    Richie
    September 17, 2009 at 2:42 pm |

    Cheers mate. Very useful. Would never have thought to use splice.

  5. Dan
    Dan
    March 21, 2011 at 11:01 am |

    Thanks for this, just to add though (And this is less efficient), my checkboxes have event handlers on them, so I have replaced the .attr calls with a filter and click functions. Works for me :)

    (function($) {
  $.fn.enableCheckboxRangeSelection = function() {
    var lastCheckbox = null;
    var $spec = this;
    $spec.bind("click", function(e) {

      if (lastCheckbox != null && e.shiftKey) {
        $spec.slice(
          Math.min($spec.index(lastCheckbox), $spec.index(e.target)),
          Math.max($spec.index(lastCheckbox), $spec.index(e.target)) + 1
        ).filter(e.target.checked ? ":not(:checked)" : ":checked").click();
      }
    });
    return $spec;
  };
})(jQuery);
  6. barneyb
    barneyb
    March 21, 2011 at 11:15 am |

    Dan,

    Good catch. I'm somewhat hesitant to trigger 'click' like that, but your intent is sound. It seems like a better solution would be to filter (as you've done), set the checked state, and then trigger 'changed', since there isn't actually a click happening (though there obviously is a change happening). In code, replace ".click()" with ".attr({checked: e.target.checked ? 'checked' : "}).change()". Thoughts?

  7. Dan
    Dan
    March 21, 2011 at 2:24 pm |

    Yeah, I'll go with that; I suppose I used click because that's the event I bound to in my existing code, but change is more appropriate to what we are actually doing.

    I did notice a reduction of performance with this method (curiously this was very significant with Firebug enabled, FF3.5). This is mostly down to the time taken firing all those events rather than the filter operations as far as I can tell.

  8. Nirmalya
    Nirmalya
    May 3, 2012 at 4:33 am |

    Can someone make this in flex?? I mean, select checkbox range within a form. please help… thanks in advance