Introducing the Quicklist: Building a Better Checkbox List

I have been doing some work for a client recently that required displaying a (potentially long) list of values from the database.  These needed to be selectable in bulk, so naturally I opted for using the jQuery UI Selectable plugin.  For the uninitiated, this plugin makes any array of elements on a page (typically lists, but can be anything) selectable using a mouse drag, click or ctrl-click action.  I discussed it with the client and they weren’t too convinced initially, but we agreed to forge ahead anyway.

On using the finished result, the client is now more adamant that the regular, familiar checkbox is the way to go.  They’ve only got a list of about 20 or 30 items in their list at the moment anyway, so what’s the harm?  My thoughts were,

“Well that’s ok for now, but what happens when you have 50 or 100 and you want to select large batches of interspersed items?  You expect your users to be happy to click each individual item?”

Thus was born the Quicklist.  Sounds fancy, but really it’s just combining the familiarity and usability of the checkbox with the convenience and speed of the jQuery UI Selectable list.

The premise is pretty simple: I want users to be able to have an array of checkboxes that works just like any other checkbox list.  However, to make life easier for them if they need to select a whole group at once, I also want them to be able to click and drag a selection rectangle over the checkbox items.

I accomplish this pretty easily.  I’ll start by creating a dummy example list of 20 items and using the jQuery UI library (referenced on the Google CDN), I’ll make that list selectable.  Very simple so far.

Next, I want to ensure that if my user selects a group of items, I set those items’ checkboxes to true.  Deselecting a group sets them to false.

For this, I’m going to use the callback function to handle the selected and unselected events as an init option.  Here’s the code:

            $('#projects').selectable({
                selected: function (event, ui) {
                    $(ui.selected).find(":checkbox").attr('checked', true);
                },
                unselected: function (event, ui) {
                    $(ui.unselected).find(":checkbox").attr('checked', false);
                }
            });

That’s all there is to it. Check out the demo on the Demos site.