Adobe-style checkboxes

May 28, 2010

I really like the how layers can be selected in Photoshop and Fireworks by holding the mouse button down and dragging the cursor over the check boxes. I always miss this feature on web forms with more than a few check boxes on them, so I thought it would be a great idea if it could be replicated.
Adding this functionality is extremely easy, all we need is the following script:

<script>
  (function($){

    //listen for mousedowns over target area
    $("fieldset").mousedown(function(e) {

      //stop text selection
      e.preventDefault();

      //stop text selection in IE
      if (window.ActiveXObject) {

        var fset = document.getElementById("checkers");
        fset.onselectstart = function () { return false; }
      }

      //add mouseovers to checkboxes
      $("input[type=checkbox]").mouseover(function() {		

        //toggle checked state
        ($(this).attr("checked") === false) ? $(this).attr("checked", "checked") : $(this).attr("checked", "");
      });
    });

    //stop listening to mouseovers when mouse button released
    $("fieldset").mouseup(function() {
      $("input[type=checkbox]").unbind("mouseover");	

      //stop unselecting text
      $("fieldset").unbind("select");
    });
  })(jQuery);
</script>

Easy right? Let’s look at what we do; first we set a mousedown event on the

because it’s the container of the check boxes and it gives the visitor plenty of target area to click and hold over. To stop any text in the parent container, such as the labels or the legend, from being selected we can use the preventDefault() method for most browsers.

IE will still allow text selection however, so we also need some additional code just for IE. The code is wrapped in a conditional that looks for the ActiveXObject, which I find a quick and easy solution in those rare times that browser detection instead of feature detection is required. To prevent the text being selected in IE we can return false from the onselectstart event which is fired by the browser as soon as any text is selected.

Next we attach a mouseover event to each of the check boxes; whenever this occurs we just test whether the check box is checked and if not we check it. If it’s already checked we uncheck it. Simple.

We also add a mouseup listener to the

so that the check boxes aren’t interacted with after the mouse button is released.

Try it out below.

Select or deselect options by clicking and dragging the mouse pointer over the checkboxes.






One Response to “Adobe-style checkboxes”

  1. [...] This post was mentioned on Twitter by danwellman, Ain Tohvri. Ain Tohvri said: RT @danwellman: Adobe-style click and drag checkboxes with jQuery: http://www.danwellman.co.uk/adobe-style-checkboxes/ enjoy :D [...]

Leave a Reply

My Books